動畫
jQuery提供了幾種動畫的操作方法暇唾。
- .hide([duration ] [,easing ] [,complete ])：用于隱藏元素。
- .show( [duration ] [, easing ] [, complete ] )：用于顯示元素。
- .toggle( [duration ] [, easing ] [, complete ] )：用來切換元素的隱藏、顯示。
- .fadeIn( [duration ] [, easing ] [, complete ] )：通過淡入的方式顯示匹配元素。
- .fadeOut( [duration ] [, easing ] [, complete ] )：通過淡出的方式隱藏匹配元素骗污。
- .fadeTo( duration, opacity [, easing ] [, complete ] )：調(diào)整匹配元素的透明度。
- .fadeToggle( [duration ] [, easing ] [, complete ] )：通過匹配的元素的不透明度動畫沈条，來顯示或隱藏它們需忿。
- .slideDown( [duration ] [, easing ] [, complete ] )：用于向下滑動顯示元素。
- .slideUp( [duration ] [, easing ] [, complete ] )：用于向上滑動顯示元素拍鲤。
- .slideToggle( [duration ] [, easing ] [, complete ] )：用滑動動畫顯示或隱藏一個匹配元素贴谎。
- .clearQueue：清除動畫隊列中未執(zhí)行的動畫。
- .finish：停止當前動畫季稳，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)擅这。
- .stop( [clearQueue ] [, jumpToEnd ] )：停止當前正在運行的動畫。
隊列
隊列的本質(zhì)是一個數(shù)組景鼠，對隊列的理解先從數(shù)組的push和shift開始仲翎。push是從數(shù) 組尾端插入新的元素痹扇，shift是從數(shù)組首端刪除元素；分別對應(yīng)隊列中得queue和 dequeue溯香。jquery所有動畫基于animate方法鲫构，而animate的動畫默認保存在名為fx的 動畫隊列中。
動畫隊列
$('.box').hide(1000, function(){
$('.box').show(1000, function(){
$('.box').fadeOut('slow',function(){
$('.box').fadeIn('slow',function(){
$('.box').slideUp(function(){
$('.box').slideDown(function(){
console.log('動畫執(zhí)行完畢')
})
})
})
})
})
})
自定義動畫
簡單的動畫不能滿足需求的時候玫坛，jquery提供了自定義動畫行為的方法结笨。
- .animate( properties [, duration ] [, easing ] [, complete ] )
$('button').on('click',function(){
$('.box').animate({
width: "300px",
height: "300px",
opacity: 0.1
},5000)
})
