本章主要講解jQuery的動畫特效。
show()、show(duration)、hide(duration,easing)、show(duration,complete)、show(duration,easing,function)、show(options) 顯示所有匹配元素
hide()、hide(duration)、hide(duration,easing)、hide(duration,function)、hide(duration,easing,complete)、hide(options) 隱藏所有匹配元素
toggle()、toggle(duration)、toggle(duration,easing)、toggle(duration,function)、toggle(duration,easing,function) 切換所有匹配元素顯示或隱藏
toggle(boolean) 單向切換
<div class="box"><div>123</div></div>
<button>點擊</button>
$('.box').show() // 立即顯示
$('.box').show(1000);
$('.box').show('fast');
$('.box').show(1000,'linear');
$('.box').show(1000,function(){
alert('顯示完畢');
});
var anim = {
duration: 1000,
easing: 'linear',
complete: function(){
alert('隱藏完畢');
}
};
$('button').on('click',function(){
$('.box').hide(anim);
});
$('.box').toggle();
$('.box').toggle(1000);
$('.box').toggle('slow');
$('.box').toggle(1000,function(){
alert('切換完畢');
});
$('.box').toggle( { duraction: 1000 } );
$('.box').toggle(true); // 等價于$('.box').show()
slideDown()、slideDown(duration,complete)、slideDown(duration,easing,complete)、sldieDown(options) 讓元素內(nèi)容自上而下逐漸顯示出來
slideUp()、slideUp(duration,complete)、slideUp(duration,easing,complete)、slideUp(options) 讓元素內(nèi)容自下而上逐漸消失
slideToggle()、slideToggle(duration,complete)、slideToggle(duration,easing,complete)、slideToggle(options) 切換元素的滑動狀態(tài)
fadeOut()、fadeOut(duration)、fadeIn(duration,easing)、fadeOut(duration,funciton)、fadeOut(duration,easing,complete) 以淡出(增加透明度)的方式隱藏元素
fadeIn()、fadeIn(duration)、fadeIn(duration,easing)、fadeIn(duration,complete)、fadeIn(duration,easing,funciton) 以淡入(減小透明度)的方法顯示元素
fadeTo(duration,opacity)、fadeTo(duration,opacity,easing,function) 增加或減小透明度到指定大小
fadeToggle()、fadeToggle(duration)、fadeToggle(duration,easing)、fadeToggle(duration,complete)、fadeToggle(duration,easing,complete) 以改變透明度來切換元素的顯示狀態(tài)
$('.box').fadeTo(1000,0.5);
animate(properties)、animate(properties,duration)、animate(properties,duration,complete)、animate(properties,duration,easing,complete)、animate(properties,options)
$('.box').animate({
height: '200px'
},1000,'linear',funciton(){
alert('執(zhí)行完畢');
});
// 支持多個動畫連續(xù)執(zhí)行
$('.box').animate({height: '200px'},1000).animate({marginTop:'30px'},500);
queue()、queue(function) 返回匹配元素上正在執(zhí)行的動畫隊列,可選函數(shù)參數(shù),表示在動畫隊列的末尾添加一個動畫
dequeue() 從匹配元素上正在執(zhí)行的動畫隊列中取出第一個動畫并執(zhí)行這個動畫
clearQueue() 清空匹配元素的隊列
stop()、stop(clearQueue)、stop(clearQueue,jumpToEnd) 停止當前動畫
finish() 停止當前所有正在執(zhí)行的動畫并清理動畫隊列
delay(time) 在兩個動畫之間插入一段延時。
<div class="box" style="width:100px;height:100px;background:red"></div>
var box = $(".box");
function anim(){
box.animate({
width: '+=5'
},100).animate({
height: '+=3'
},200).animate({
marginTop: '+=3'
},300,funciton(){
$('.box').queue().length; //1
});
};
anim();
stop()方法用來停止當前動畫,它還可傳入三個可選的布爾值參數(shù)。
stop( [ queueName ] [, clearQueue [, jumpToEnd ] ] );
第一個參數(shù)是要停止動畫的隊列名稱(1.7版本新增,默認為 fx ),后兩個參數(shù)的默認值都是false,也就是說只有當前正在播放的動畫被從隊列中刪除,并且各個CSS屬性的值會保持為動畫被打斷瞬間的值;
如果把第一個參數(shù)的值設置為true,就會刪除隊列中的所有其他動畫;如果把第二個參數(shù)設置為true,那么正在播放的動畫會瞬間抵達動畫終點。
finish()方法用來停止當前所有正在執(zhí)行的動畫并清理動畫隊列,等價于stop(true,true)
(3)delay()
delay()在兩個動畫之間插入一段延時,可傳入一個以毫秒為單位的數(shù)據(jù),表示應該延遲的時間。
delay(duration)
6、$.fx.off和$.fx.interval
$.fx.off 可用于設置或返回是否全局性地禁用所有動畫。
$.fx.off = true | false;
如果將該屬性設為true,將全局性地禁用所有動畫。所有正在執(zhí)行的動畫隊列不會受到影響。尚未執(zhí)行的任何動畫隊列都會在執(zhí)行時立即完成,而不再帶有動畫效果。
如果將該屬性設為false,將全局性地啟用動畫效果。
$.fx.interval 用于設置或返回動畫的幀速(毫秒值),也可以這樣理解,用于設置jQuery動畫每隔多少毫秒繪制一幀圖像(觸發(fā)一次樣式更改,瀏覽器可能會重新繪制當前頁面)。
該值越小,則動畫的觸發(fā)次數(shù)越多,動畫效果也更明顯、更平滑,當然也就越耗費性能。
更改該屬性值時,正在執(zhí)行的動畫隊列將不受影響。尚未執(zhí)行的任何動畫隊列都將按照更改后的幀速來繪制動畫效果。
更多建議: