Fade in each element - one after another

Question

I am trying to find a way to load a JSON page to display my content, which I currently have. But I am trying to fade in each element one after another? Is anyone familiar with a way to do that?

Fade 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

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 would basically wait a set amount of time and fade each element in. This works because you're multiplying the time to wait by the index of the element. The delays would look something like this when iterating through the array:

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

This makes a nice "one after the other" fadeIn effect. It could also be used with slideDown.

Answer 2

Well, you could setup your fade functions to trigger the "next" one.

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

But a timer may be a better system, or a function that gets them all, puts them in an array, then pops them off one at a time with a delay in between, fading them in one at a time.

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 haven't tested it, but even if it does not work, you should get the idea and fix it easily.

By the way, I don't agree with using a timer. With a timer, there is nothing guaranteeing that the elements fade in one after each other, and the fading in of one element will only start if the previous one is over.

Theoretically, it should work, but there might be cases when your "chain" needs to stop for some reason, or the fading animation cannot finish on time, etc. Just use proper chaining.

Answer 5

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

Answer 6

From answers above I came up with something like this which 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();    
            });
        });
    });               
},

}