提姆寫程式

0%

jQuery 筆記 - delay() 延遲動畫效果

發表於 分類於 Disqus：
透過延遲效果讓動畫效果更豐富

delay

筆記一個很簡單但也滿實用的方法，delay();，可以加在其他動畫效果語法之前，並輸入時間就可以達到效果。

直接看程式碼，點擊按鈕可以得到三個方塊輪流出現。

HTML 架構

1
2
3
4
<button class="btn jq-click">click</button>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>

jQuery 寫法

把想要延遲的時間寫在 delay(); 中就可以了，很簡單吧!

1
2
3
4
5
6
7
8
$(function () {
  $(".jq-click").click(function (e) {
    e.preventDefault();
    $(".box1").delay(600).fadeToggle(300);
    $(".box2").delay(1200).fadeToggle(500);
    $(".box3").delay(1800).fadeToggle(1000);
  });
});