jQuery动画队列简介

jQuery 提供针对动画的队列功能。

这意味着如果编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

案例:

http://js.jirengu.com/dafes/3/edit?html,output

动画队列写法可简化

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})

//等价于

$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
    })

jquery还提供了自定义动画行为的方法

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

animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

https://api.jquery.com/animate/

.clearQueue

清除动画队列中未执行的动画

.finish

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

• clearQueue(default: false)

• jumpToEnd(default: false)

stop方法接受两个可选boolean型参数，第一个参数默认为false，表示动画队列不会被取消，如果设置为true，表示取消接下来的动画队列。第二个参数默认值是false，表示正在变化的属性保留当前值，设置为true表示变化到当前动画的最终值。

参考:https://oscarotero.com/jquery/