新聞中心
本文實例講述了JQuery常用簡單動畫操作方法。分享給大家供大家參考,具體如下:

創(chuàng)新互聯(lián)建站溝通電話:18980820575,為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),創(chuàng)新互聯(lián)建站網(wǎng)頁制作領(lǐng)域十多年,包括橡塑保溫等多個方面擁有多年的網(wǎng)站運維經(jīng)驗,選擇創(chuàng)新互聯(lián)建站,為網(wǎng)站保駕護(hù)航。
jQuery基礎(chǔ)動畫回顧
| .hide() | 隱藏動畫 |
| .show() | 出現(xiàn)動畫 |
| .toggle() | 切換顯示狀態(tài) |
| .slideUp()/Down() | 下拉/卷起動畫 |
| .slideToggle() | 下拉卷起切換 |
| .fadeIn()/Out() | 淡入/出動畫 |
| .fadeToggle() | 淡入淡出切換 |
| .fadeTo() | 透明度變化到指定透明度,參數(shù)為(duration,opacity) |
| .animate() | 控制css動畫,參數(shù)(properties,option) |
| .stop() | 停止動畫的執(zhí)行 |
注:
1、可選參數(shù),動畫持續(xù)時間及結(jié)束后的回調(diào)函數(shù),持續(xù)時間也可以用“slow”/“fast”代替。例如
$("#t").hide(3000,function (){
alert(“回調(diào)函數(shù)”);
})
//也可以用JSON格式設(shè)置參數(shù)
$("#t").hide({
duration: 3000,
complete: function() {
alert(“回調(diào)函數(shù)”);
}
})
2、animate中option屬性的參數(shù)有{duration,easing,step,progress,complete}
- duration - 設(shè)置動畫執(zhí)行的時間
- easing - 規(guī)定要使用的 easing 函數(shù),過渡使用哪種緩動函數(shù),內(nèi)置的有l(wèi)inear線性變化,swing曲線變化,如果需要其他變化方式需要導(dǎo)入庫
- step:規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
- progress:每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào),就是一個進(jìn)度的概念
- complete:動畫完成回調(diào)
$('#elem').animate({ //在現(xiàn)有高寬上增加100px
width : "+=100px",
height : "+=100px"
}, {
duration: 5000, //在5秒內(nèi)執(zhí)行完成
specialEasing: {
width: 'linear', //線性過渡效果
height: 'easeOutBounce'
},
complete: function() {
$(this).after('動畫執(zhí)行完畢!');
}
});
3、stop():只會停止第一個動畫,后面的繼續(xù)
- stop(true):停止所有動畫
- stop(true ture):停止動畫,直接跳到第一個動畫的最終狀態(tài)
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題:《jQuery動畫與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
當(dāng)前標(biāo)題:JQuery常用簡單動畫操作方法回顧與總結(jié)
URL地址:http://www.dlmjj.cn/article/jjccpe.html


咨詢
建站咨詢
