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.