动画队列

$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('真的完毕了')
    })

对于一个元素的动画有连续的操作，它就会把动画放入动画队列里面，然后按照先后顺序，一次执行。注意的是动画还是遵循css的规则。

.clearQueue

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

.finish

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

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

• clearQueue(default: false)
• jumpToEnd(default: false)

stop(false,false)
停止当前动画

image.png

stop(true,false)
停止当前动画，并清除未执行的动画队列

image.png

stop(true,true)
停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态

image.png

.finsh
停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态

image.png