动画队列

动画

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 ] )：调整匹配元素的透明度。
• .fadeToggle( [duration ] [, easing ] [, complete ] )：通过匹配的元素的不透明度动画，来显示或隐藏它们。
• .slideDown( [duration ] [, easing ] [, complete ] )：用于向下滑动显示元素。
• .slideUp( [duration ] [, easing ] [, complete ] )：用于向上滑动显示元素。
• .slideToggle( [duration ] [, easing ] [, complete ] )：用滑动动画显示或隐藏一个匹配元素。
• .clearQueue：清除动画队列中未执行的动画。
• .finish：停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。
• .stop( [clearQueue ] [, jumpToEnd ] )：停止当前正在运行的动画。

队列

队列的本质是一个数组，对队列的理解先从数组的push和shift开始。push是从数 组尾端插入新的元素，shift是从数组首端删除元素；分别对应队列中得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('动画执行完毕')
           })
         })
       })
     })
   })
  })

自定义动画

简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法。

• .animate( properties [, duration ] [, easing ] [, complete ] )

$('button').on('click',function(){
  $('.box').animate({
    width: "300px",
    height: "300px",
    opacity: 0.1
  },5000)
})