Fade-In Several Elements with JQuery, Each with Random Delay

Question

Trying to use JQuery to make several elements, each in their own DIV, phase in with their own "delay" and "fadeIn" values. I have it working in This Fiddle, but is this the most efficient way to go? In the live site, I will pass a random number via PHP for the delay and fadeIn values.

Here is the 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);

It'd be inefficient if you have a lot of elements in the parent container .fade_container. How about a loop that goes through the children of that? You can then bind .fadeIn to each of those with an increasing interval on both .delay and .fadein — Xenyal
– Xenyal, Commented Nov 21, 2014 at 15:51

thecodeparadox · Accepted Answer · 2014-11-21 16:02:49Z

You can write a tiny jQuery plugin script like below:

$.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

Collectives™ on Stack Overflow

Fade-In Several Elements with JQuery, Each with Random Delay

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related