JQuery 动画队列简述

先看以下代码

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

这段代码可以执行结果如下

动画.gif

刚刚那一段代码 回调函数中嵌套回调函数，特别丑！！！
但是！！！还是有救的
JQuery有动画队列，可以放入动画队列中，然后去异步执行其他代码，例如截图中 “动画完毕了吗？” 这句话在动画执行的同时已经在控制台显示了。
同时动画队列中同步执行，执行完一个动画再执行下一个。

代码如下

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