使用jquery / js将HTML元素显示为带有暂停的序列

Question

I've been searching for quite a while now, and before everyone hits me the setTimeout() function, hear me out.

I have ~20 HTML elements which are invisible. I want them to turn visible one at a time, with a pause inbetween. I also want to use some of jQueries awesome animation features when turning them visible.

So basically I want to "play a sequence of frames/events/states" using JavaScript/jQuery.

What have I looked in to?

SetTimeout():

I've been looking at the JS setTimeout function, and from what I can tell, it works great when you have 1-3 setTimeout() functions.

If you want more, it starts to get extremely messy. They are embedded, you have to time everything by adding numbers together and it's really hard to get the overall picture.

jQuery.delay()

Also, the jQuery.delay() function lacks to actually pause the code. I have 20+ elements, not one I want to animate.

Updatepanel spam

Another option, which I kind of considers right now (please, kill me), is using an updatepanel. Every second it makes a postback using a timer, and using a session, it knows exactly at what "frame" it is. Then it can set things visible/invisible depending on frame number, and also fire jQuery animations.

Now, when I woke up this morning, I didn't dream of spamming my webserver with an updatepanel like this.... So:

Is there any good ways to do this? I am very open to suggestions.

Thanks a lot! :-)

Answer 1

If you apply the same class to all the elements ( sequential_expose in my example), you can select those elements and call each() on the selection. To stagger the fade in of the elements, you can multiple the index of the item as provided from each() and multiply it by the time you want for for the delay between fadeIn's and pass that value as parameter to delay() . Given an interval of 500 milliseconds (you can make this whatever you want), the first item in selection would have 0 as delay, the second 500 , the third 1000 , etc. You then just chain your preferred animation ( fadeIn(200) in my example) after the call to delay() .

$(function () {
    $('.sequential_expose').each(function(i) {
        $(this).delay(i*500).fadeIn(200);
    });
});

Note the example shows this as a document onready function, you can obviously change this as needed.

Answer 2

Here is how I would use setTimeout for this:

// Assume your target elements are all divs 
var elements = $('div');

function showOne() {
    // Fade-in the first element
    elements.first().fadeIn(200);

    // Remove first element from our jQuery object
    elements.splice(0,1);

    // If there are further elements, start a new timer
    if(elements.length) {
        setTimeout(showOne, 500);
    }
}

// Start first timeout
setTimeout(showOne, 500);

http://jsfiddle.net/uRwFK/

Answer 3

jQuery animate() includes a complete callback that allows you to chain animations.

Let's say you have an array of 20 DOM elements, here is a rough snippet:

var elArray=[el1,el2,...el20];

function animateFunction(i) {
    $(elArray[i]).animate(
       ...
       // on complete move to the next element
       complete: function(){if (i<elArray.length-1) animateFunction(i+1);}
    });
}

animateFunction(0);