動畫佇列

• jQuery中的animate的自定義動畫中，含有動畫佇列的感念。將所要執行的動畫按一個個的排列成一隊，並先後順序的一個個的執行。

    $('#btn4').click(function(){
      $('.box').animate({        left: '100px'
      }, 1000)//執行第一個動畫向左移動到100px
      $('.box').animate({        left: '100px',        top: '100px'
      }, 1000)//執行第二個動畫操作移動到上面這個位置。下面以此類推不是同時執行動畫，是一個個的按順序執行
      $('.box').animate({        left: '0',        top: '100px'
      }, 1000)
      $('.box').animate({        left: '0',        top: '0'
      }, 1000)
    })

動畫佇列的停止和清除

.clearQueue

• 清除動畫佇列中未執行的動畫

.stop( [clearQueue ] [, jumpToEnd ] )

停止當前正在執行的動畫

• clearQueue(default: false)

• jumpToEnd(default: false)

    $('#btn6').click(function(){      //去掉當前動畫操作，並進行後面的動畫操作
      $('.box').stop(false,false)
    })

    $('#btn7').click(function(){      //停止當前動畫，並清除未執行的動畫佇列(即動畫暫停效果)
      $('.box').stop(true, false)
    })

   $('#btn8').click(function(){      //停止當前動畫，並清除未執行的動畫佇列，並且當前動畫展示最終狀態（即將此時那一幀的動畫操作完成）
      $('.box').stop(true, true)
    })

.finsih()

• 停止當前動畫，並清除動畫佇列中所有未完成的動畫,最終展示動畫佇列最後一幀的最終狀態

$('#btn9').click(function(){      //停止當前動畫，並清除未執行的動畫佇列，最終展示動畫佇列最後一幀的最終狀態
      $('.box').finish()
    })

效果連結：

作者：徐金俊
連結：