jQuery 動畫隊列相關(guān)

queue()

queue()方法可以接受一個可選參數(shù),可以得到動畫隊列的長度。
queue()方法可以接受一個回調(diào)函數(shù)作為參數(shù),表示將要添加到隊列中的新函數(shù)。但回調(diào)函數(shù)中,可以進行樣式變換等,但不可以增加動畫效果。
隊列執(zhí)行完queue()的函數(shù)后,隊列后面的動畫效果被停止,這時就需要用到dequeue()方法

dequeue()

dequeue()方法用來執(zhí)行匹配元素隊列的下一個函數(shù)

clearQueue()

與deQueue()方法相反,clearQueue()方法用來從列隊中移除所有未執(zhí)行的項,但并不影響當前動畫效果

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style>
  div {
    margin-top:50px;
    width: 50px;
    position: absolute;
    height: 50px;
    left: 10px;
    top: 30px;
    background-color: yellow;
  }
  div.red {
    background-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="num">0</p>
<button>Start</button>
<button class="clear">Clear</buttton>
<div></div>
 
<script>
$( "button" ).click(function() {
  showIt()
  $( "div" )
    .animate({ left:"+=200px" }, 2000 )
    .animate({ top:"0px" }, 600 )
    .queue(function() {
      $( this ).toggleClass( "red" ).dequeue();
    })
    .animate({ left:"10px", top:"30px" }, 700 );
});
  function showIt(){
  var num = $('div').queue().length
  $('#num').text(num);
  setTimeout(showIt,10)
}
$('.clear').click(function(){
   $( "div" ).clearQueue()
})
</script>
 
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 1.ios高性能編程 (1).內(nèi)層 最小的內(nèi)層平均值和峰值(2).耗電量 高效的算法和數(shù)據(jù)結(jié)構(gòu)(3).初始化時...
    歐辰_OSR閱讀 29,643評論 8 265
  • 隱藏元素的hide方法 讓頁面上的元素不可見,一般可以通過設置css的display為none屬性。但是通過css...
    老夫撩發(fā)少年狂閱讀 1,111評論 0 2
  • jQuery中隱藏元素的hide方法 讓頁面上的元素不可見,一般可以通過設置css的display為none屬性。...
    阿r阿r閱讀 1,174評論 0 4
  • OC語言基礎(chǔ) 1.類與對象 類方法 OC的類方法只有2種:靜態(tài)方法和實例方法兩種 在OC中,只要方法聲明在@int...
    奇異果好補閱讀 4,358評論 0 11
  • 說明 本系列文章的學習首先要感謝史前圖騰的共享精神,在他的系列文章中有詳細的解釋,但是他的代碼都是Swift寫的....
    嚴兵勝閱讀 606評論 0 1