動畫

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ù)組首端刪除元素；分別對應隊列中得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)
})