使用JQuery淡入幾個元素，每個元素都帶有隨機延遲

試圖使用JQuery來創建多個元素，每個元素都在它們自己的DIV中，並使用它們自己的「延遲」和「淡入」值。我在This Fiddle工作，但這是最有效的方法嗎？在現場，我會通過PHP傳遞一個隨機數，以獲得延遲和淡入值。使用JQuery淡入幾個元素，每個元素都帶有隨機延遲

這裏是JQuery的：

$(".fade1").hide(0).delay(500).fadeIn(500); 
$(".fade2").hide(0).delay(800).fadeIn(1750); 
$(".fade3").hide(0).delay(1000).fadeIn(3500); 
$(".fade4").hide(0).delay(1500).fadeIn(5000);

來源

2014-11-21 MatthewSchenker

這將會是低效的，如果你有很多的元素在父容器'.fade_container'中。如何通過該循環的孩子？然後，您可以在'.delay'和'.fadein'上將'.fadeIn'綁定到每個不斷增加的時間間隔。 – Xenyal 2014-11-21 15:51:42

你可以寫一個很小的jQuery插件腳本象下面這樣：

$.fn.hideNFadeIn = function (opts) { 
    var options = opts; 
    this.each(function (i) { 
     $(this).hide(0).delay(options.delay[i]).fadeIn(options.fadeIn[i]); 
    }); 
}; 
$('.fade1, .fade2, .fade3, .fade4').hideNFadeIn({ 
    delay: [500, 800, 1000, 1500], 
    fadeIn: [500, 1750, 3500, 5000] 
});

Demo

來源

2014-11-21 16:02:49 thecodeparadox

好主意！我已經用這個更新了我原來的小提琴。 – MatthewSchenker 2014-11-21 16:11:08

使用JQuery淡入幾個元素，每個元素都帶有隨機延遲

回答

相關問題