jQueryのアニメーションキュー

一、書き方
(1)方式一:アニメーションを連続して書くとアニメーションキューが形成され、上から下へ順に実行される

$('#btn4').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)  //        
      $('.box').animate({
        left: '100px',
        top: '100px'
      }, 1000) //        
      $('.box').animate({
        left: '0',
        top: '100px'
      }, 1000) //        
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000) //        
    })

(2)方式2:後続アニメーションを1番目のアニメーションのコールバック関数に書き込む

$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('     ')
    })

特に、キューは、エレメント上で動作シーケンスを非同期で呼び出すように実行されます.たとえば次のコードでは、実行順序はすぐに文字showlaを表示し、showアニメーションを実行します.

$('#btn-box1').on('click',function(){
    $('.box').show(400) //      
    console.log('showla') //      
})

showlaコードをshowアニメーションコールバック関数に表示できます

$('#btn-box1').on('click',function(){
    $('.box').show(400,function(){ //      
        console.log('showla') //      
    })  
})

二、クリアと停止
(1) .clearQueue
アニメーションキューで実行されていないアニメーションをクリア
(2) .finish
現在のアニメーションを停止し、アニメーションキュー内の未完了のアニメーションをすべてクリアし、アニメーションキューの最後のフレームの最終ステータスを最終的に表示します.
(3) .stop( [clearQueue ][, jumpToEnd ] )

stop():現在実行中のアニメーションを停止し、すぐに後続のアニメーション

を実行します.

.stop(true,false):現在のアニメーションを停止し、実行されていないアニメーションキュー

をクリアします.

.stop(true,true):現在のアニメーションを停止し、実行されていないアニメーションキューをクリアし、現在のアニメーションは最終状態

を示します.

clearQueue(default: false)

jumpToEnd(default: false)

demoアドレスリファレンスhttp://js.jirengu.com/viqiv/1/edit?html,css,output