鏈接jQuery動畫，影響不同的元素

$(document).ready(function() { 
    $("#div1").fadeIn("slow"); 
    $("#div2").delay(500).fadeIn("slow"); 
    $("#div3").delay(2000).fadeIn("slow"); 
    $("#div4").delay(8000).fadeIn("slow"); 
});

這是我目前的設置，但我覺得這不是寫這個最好的方式。我找不到任何有關如何更好地編寫時間的例子。任何幫助？我會很感激。鏈接jQuery動畫，影響不同的元素

我還應該補充說明每個元素的時間不一致。

來源

2010-11-16 Tom

fadeIn將回調作爲其第二個參數。該回調在動畫完成後立即執行。如果希望的元素，以順序地褪色，可以鏈回調：

$(document).ready(function() { 
    $("#div1").fadeIn("slow", function(){ 
     $("#div2").fadeIn("slow", function(){ 
      $("#div3").fadeIn("slow", function(){ 
       $("#div4").fadeIn("slow"); 
      }); 
     }); 
    }); 
});

這可以使用選擇器的陣列和一個單一的方法重寫，如果你感覺就像：

var chain = function(toAnimate, ix){ 
    if(toAnimate[ix]){ 
     $(toAnimate[ix]).fadeIn('slow', function(){ chain(toAnimate, ix + 1)}); 
    } 
}; 

$(document).ready(function(){ 
    chain(['#div1', '#div2', '#div3', '#div4'], 0); 
});

See this last one in action at JSBin。

來源

2010-11-16 19:27:32

這是解決方案，我正要提議，但我不明白爲什麼你重複＃DIV4底部淡入。這只是一個錯字嗎？ – 2010-11-16 19:29:59

雖然這是有效的，但我相信OP的延遲點是基於動畫需要多長時間創建順序行爲。因此，延遲引用可能被刪除，因爲它會依次通過回調現在的 – 2010-11-16 19:30:05

這兩個好處;糾正。 – 2010-11-16 19:37:38

只要你在談論一個一致的增量（並且只要它們在頁面上以相同的順序出現），我就會在一個循環中執行它。

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(idx * 1000).fadeIn("slow"); 
});

實施例：http://jsfiddle.net/km66t/

此使用由.each()傳遞給遞增延遲索引。

所以你切實做好：

$("#div1").delay(0).fadeIn("slow"); 
$("#div2").delay(1000).fadeIn("slow"); 
$("#div3").delay(2000).fadeIn("slow"); 
$("#div4").delay(3000).fadeIn("slow");

編輯：懷着希望去解決這個問題的評論如下，你可以改爲保存您想使用延遲的陣列，並使用.each()中的索引訪問Array的正確索引。

var delays = [0, 1000, 2000, 4000]; 

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(delays[ idx ]).fadeIn("slow"); 
});

來源

2010-11-16 19:54:43 user113716

非常簡單。做得好。 – bozdoz 2010-11-16 20:05:15

如果我不希望它一致，該怎麼辦？ – Tom 2010-11-17 01:08:08

@Tom - 你是說你想要他們是隨機的，或者你會有一套你想要的特定延遲。另外，你想要動畫的持續時間是隨機的還是變化的？我會在預測您的回覆時提供更新。 – user113716 2010-11-17 01:14:48

與提供的答案不開心，這是我用什麼：

var $steps = $('#div1, #div2, #div3'); 
    // iterate throught all of them 
    $.each($steps,function(index,value){ 
     $stage.fadeIn('slow', function(){ 
      // You can even do something after the an animation step is completed placing your code here. 
      // run the function again using a little introspection provided by javascript 
      arguments.callee 
     }); 
    })

這樣你就不必申報延遲。

來源

2013-01-17 00:15:04

這可以優雅，因爲1.8來完成：

$("div").toArray().map(function(e){ 
    return function(){ 
     return $(e).fadeIn(600).promise() 
    }; 
}).reduce(function(cur, next){ 
    return cur.then(next); 
}, $().promise());

http://jsfiddle.net/f3WzR/

來源

2013-09-24 10:46:58 Esailija

美麗的解決方案。謝謝。 – thatidiotguy 2015-06-26 15:17:11

鏈接jQuery動畫，影響不同的元素

回答

相關問題