Attenuation in each element - one after another

Question

I am trying to find a way to load a JSON page to display my content that I have. But am I trying to fade in each element one by one? Does anyone know how to do this?

Attenuation in each element with a slight delay?

Here is an example of my code, I am using the jquery framework.

CODE: http://pastie.org/343896

Answer 1

Well, you can customize your fade function to trigger "next."

$("div#foo").fadeIn("fast",function(){ $("div#bar").fadeIn("fast", function(){ // etc. }); }); 

But a timer may be the best system or function that gets them all, puts them in an array, and then pops them one at a time with a delay between them, damping them one at a time.

Answer 2

Let's say you have an array of span elements:

 $("span").each(function(index) { $(this).delay(400*index).fadeIn(300); }); 

(quick note: I think you need jQuery 1.4 or higher to use the .delay method)

This will basically wait for a certain amount of time and each element will disappear. This works because you multiply the timeout by the index of the element. The delays will look something like this when they are repeated through an array:

• Delay 400 * 0 (no delay, just fadeIn what we want for the very first element)
• Delay 400 * 1
• Delay 400 * 2
• Delay 400 * 3

This makes a good fadeIn one by one effect. It can also be used with slideDown. Hope this helps!

Answer 3

How about this?

 jQuery.fn.fadeDelay = function() { delay = 0; return this.each(function() { $(this).delay(delay).fadeIn(350); delay += 50; }); }; 

Answer 4

I think you will need something like this:

 var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery(); fadeInNextElement(elementArray); function fadeInNextElement(elementArray) { if (elementArray.length > 0) { var element = elementArray.pop(); $(element).fadeIn('normal', function() { fadeInNextElement(elementArray); } } } 

Caution: I have not tested it, but even if it does not work, you should get this idea and easily fix it.

By the way, I do not agree with the use of a timer. With a timer, there is nothing to guarantee that the elements will disappear one by one, and the fading of one element will only begin if the previous one is finished.

Theoretically, it should work, but there may be times when your “chain” should stop for some reason or the animation of fading cannot finish on time, etc. Just use the right chain.

Answer 5

Mark jQuery fadeIn () with setTimeout () (standard JS function). You can check something that I did on this site http://www.realstorage.ca/ . I basically hide and show them so they can go in a loop.

Answer 6

From the answers above, I came up with something like this that worked well for me.

HTML

 <div id="errorMessage" class="d-none" ></div> 

Javascript

 var vehicle = { error: (error, message) => { if(error){ vehicle.popUp(message, 'bg-danger'); }else{ vehicle.popUp(message, 'bg-success'); } }, popUp: (array, bgColor) => { var errorBox = $('#errorMessage'); errorBox.removeClass('d-none'); $.each(array, function(i,e){ i=i+1; var messageBox = '<div id="'+i+'" class="'+bgColor+' text-white">'+e+'</div>'; $(messageBox).appendTo(errorBox).delay(100*i+0).slideDown(100*i+0,function(){ $('#'+i).delay(1000*i+0).slideUp(400*i+0, function(){ $('#'+i).remove(); }); }); }); }, }