Animate Divs One Right After the Other with Jquery

Question

Im trying to animate multiple divs, fading in, one right after the other in sequence when the page loads. I also want to do it in reverse, fading out in sequence, when i click to go to another page. How do i go about setting this up in jquery?

Answer 1

Kind of hard to give you an example since there are so many ways to animate in jQuery, but here's a simple example. Animating two <div>s, one after the other (on page load):

See working example here: http://jsfiddle.net/andrewwhitaker/p7MJv/

HTML:

<div id="animation-one">Hello!</div>
<div id="animation-two">Jquery Animate!</div>

CSS:

#animation-one,
#animation-two
{
    opacity:0;
    top: 30px;
    width: 400px;
    height: 100px;
    background-color:#00CCCC;
    font-size:35pt;
    position:absolute;
}

#animation-one
{
    background-color:#CCCC33;
    top:130px;
}

JavaScript:

$("#animation-one").animate({
    opacity:1.0}, 700,
    function() {
        // Callback function: This is called when 'animation-one'
        // is finished.
        $("#animation-two").animate({
            opacity: 1.0
        }, 700);
    }
);

Here's what's happening:

• Two <div>s are on the page with CSS opacity: 0
• When the page is loaded, the <div> with id animation-one is animated over a period of 700 milliseconds from opacity 0 to opacity 1.
• After the animation-ones animation has finished, another <div> (with id animation-two) has an animation kicked off in a similar fashion.

---

Now, fading out the <div>s is similar. I've assumed that your link just directs to another page, so I've suspended the following of that link until the animation is finished:

This assumes you have a link <a> with an id of next-page, but really it can be any selector:

HTML:

<a id="next-page" href="http://www.google.com">Google</a>

JavaScript:

$("#next-page").click(function($event) {
    $event.preventDefault();
    var href = $(this).attr("href");

    $("#animation-two").animate({
        opacity: 0}, 700,
        function() {
            // Callback function:  This is called when 'animation-two'
            // is finished.
            $("#animation-one").animate({
                opacity: 0}, 700,
                function() {
                    // Direct the user to the link's intended
                    // target.
                    window.location = href;
                });
    })
});

Here's what's happening:

• When the link with id next-page is clicked, a similar animation sequence as described above occurs, but in reverse.
• After the last animation occurs, the link is followed properly.

I think seeing the example in the link above should help. Also, make sure and check out the docs for animate.

Hope that helps!

Edit: Adding a link to another example since the OP wants to animate multiple <div>s at once: http://jsfiddle.net/andrewwhitaker/n3GEB/. This moves common code into functions and hopefully makes the example easier to read.

Answer 2

Note that the jQuery animation functions take a callback as the final parameter. This function is called when the animation is complete. You would start animating the next DIV in this callback. Another option would be fxQueues.

There is not a perfect way to reverse the animation when leaving the page. You could do it for links on your page by doing something along the lines of:

$("a").click(function()
{
    var target = $(this).href;
    // Do animation
    // In the final completion callback, do
    window.location.href = target;
});

(Note I don't guarantee this works, it is just pseudocode)

Answer 3

I would look at using callbacks and queues.

Take a look at this:

jQuery queue events http://api.jquery.com/queue/

Hope this is a point in the right direction for you.