溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JQuery常用簡單動畫操作方法。分享給大家供大家參考，具體如下：
jQuery基礎動畫回顧
|
.hide() |
隱藏動畫 |
|
.show() |
出現動畫 |
|
.toggle() |
切換顯示狀態 |
|
.slideUp()/Down() |
下拉/卷起動畫 |
|
.slideToggle() |
下拉卷起切換 |
|
.fadeIn()/Out() |
淡入/出動畫 |
|
.fadeToggle() |
淡入淡出切換 |
|
.fadeTo() |
透明度變化到指定透明度，參數為（duration，opacity） |
|
.animate() |
控制css動畫，參數（properties,option） |
|
.stop() |
停止動畫的執行 |
注：
1、可選參數，動畫持續時間及結束后的回調函數，持續時間也可以用“slow”/“fast”代替。例如
$("#t").hide(3000,function (){
alert(“回調函數”);
})
//也可以用JSON格式設置參數
$("#t").hide({
duration: 3000,
complete: function() {
alert(“回調函數”);
}
})
2、animate中option屬性的參數有{duration,easing,step,progress，complete}
$('#elem').animate({ //在現有高寬上增加100px
width : "+=100px",
height : "+=100px"
}, {
duration: 5000, //在5秒內執行完成
specialEasing: {
width: 'linear', //線性過渡效果
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>動畫執行完畢!</div>');
}
});
3、stop()：只會停止第一個動畫，后面的繼續
更多關于jQuery相關內容還可查看本站專題：《jQuery動畫與特效用法總結》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
