jQuery一步一步動畫

我想要三個元素一個接一個地淡入淡出。jQuery一步一步動畫

<span class="a">Step 1</span> 
<span class="b">Step 2</span> 
<span class="c">Step 3</span>

這裏是我JS嘗試與when()和done()（見http://jsfiddle.net/wU9Qf/）：

var step1 = $(".a").fadeIn(3000); 
var step2 = function(){$(".b").fadeIn(3000);}; 
var step3 = function(){$(".c").fadeIn(3000);}; 

$.when(step1).done(step2);

我想fadeIn()一步一步（步驟1>第2步>步驟3） - 我該怎麼辦做這個？

來源

2011-05-27 l2aelba

這是你在問什麼？

$(".a").fadeIn(3000,function(){ 
    $(".b").fadeIn(3000, function(){ 
     $(".c").fadeIn(3000); 
    }); 
});

來源

2011-05-27 11:57:08 Joakim

是！我忘了這個 – l2aelba 2011-05-27 11:58:57

+1 :-) \ *刪除自己的答案\ * – Tomalak 2011-05-27 11:59:29

另一種選擇是，如果您使用的是jQuery 1.6，則使用允許您爲動畫使用延遲行爲的新語法。例如：

$.when($('#foo').animate({ 
    top: 100, 
    left: 100 
}, 3000)).pipe(function() { 
    return this.animate({ 
     top: 0, 
     left: 0 
    }, 3000); 
}).then(function() { 
    console.log('done'); 
});

此代碼動畫#foo，那麼當動畫完成，下一個開始。完成後，它將「完成」記錄到控制檯。如果你有很多動畫要做，這可能比做多個嵌套回調要乾淨。

來源

2011-05-27 12:17:08 lonesomeday

$('span').each(function(i, el){ 
    setTimeout(function(){ 
    $(el).fadeIn(); 
    },100*i); 
});

使用setTimeout這樣的$.each內讓你的動畫，以元件的任意量。調整100*i以增加/減少動畫之間的持續時間，並將$(el).fadeIn();設置爲任何類型的動畫，顯然

來源

2011-07-28 02:16:33

如果您有任何父元素，那麼您也可以應用以下方法。 each（）函數用於遍歷目標jQuery對象的每個元素。

<div id="parent_div"> 
          <p class="none at_font"><i class="fa fa-hand-o-right"></i> Web Design And Development</p> 
          <p class="none at_font"><i class="fa fa-hand-o-right"></i> Android Development</p> 
          <p class="none at_font"><i class="fa fa-hand-o-right"></i> iFone Development</p> 
          <p class="none at_font"><i class="fa fa-hand-o-right"></i> Wordpress Development</p> 
          <p class="none at_font"><i class="fa fa-hand-o-right"></i> Website Clone</p> 
         </div> 

      <button class="btn btn-default" id="at_explorer">Explorer</button> 

      <script> 
       $("#at_explorer").click(function() { 
         $("#parent_div").children().each(function (index) { 
          $(this).delay(500 * index).fadeIn(300); 
         }); 
        }); 
       </script>

此博客包含了所有漸變效果的例子 http://www.alphansotech.com/blogs/jquery-fadein-fadeout-examples/

來源

2015-12-25 10:24:35

jQuery一步一步動畫

回答

相關問題