Animate elements sequentially using CSS3 and jQuery

Question

I'm a beginner to jQuery (and CSS3 and everything else for that matter) and am wondering how to automatically animate three different elements (images, in this case) so that they appear one after the other in a sequence - #1, #2, #3 - when the page loads. Here's my CSS:

img#element3 {
    position:absolute;
    opacity:0;
    top:25px;
}

img#element2 {
    position:absolute;
    opacity:0;
    top:270px;
    left:60px;
    margin:10px 0;
}

img#element1 {
    position:absolute;
    opacity:0;
    top:328px;
    left:70px;
    margin:10px 0;
}

For the jQuery, I tried to modify the solution in this post but it's not working. Here's what I did for jQuery:

$(document).ready(handler)
    $("#element3").animate({opacity: "1"}, "slow", function() {
    $("#element2").animate({opacity: "1"}, "slow", function() {
    $("element1").animate({opacity: "1"}, "slow", function() {
    });
});
});

Is there a way to do this using just CSS3 animations or transitions? If not, what's the proper way to do so using jQuery, and how do you specify orders and delays to do so?

score 3 · Accepted Answer · answered Jun 19 '11 at 00:50

3

You could not do the staged animation with CSS alone.

Your code has a lot of syntax problems. You can consult your error console or use a tool such as JSLint.

I'd probably use...

$(document).ready(function() {
    $("#element3").fadeIn('slow', function() {
        $("#element2").fadeIn('slow', function() {
            $("#element1").fadeIn('slow');
        });
    });
});

jsFiddle.

answered Jun 19 '11 at 00:50

alex

479,566
201
878
984

Oh wow, hadn't used JSLint before...thanks! +1 for the Fiddle too. – tvalent2 Jun 19 '11 at 00:52

score 2 · Answer 2 · answered Jun 19 '11 at 00:58

2

A little cleaner if you use a class, or a multiple selector with .each():

$(document).ready(function() {
    $("#element3,#element2,#element1").each(function(i) {
        $(this).delay(600*i).animate({opacity: "1"}, "slow");
    });
});

...or if the order is reversed:

$(document).ready(function() {
    $( $("#element3,#element2,#element1").get().reverse() ).each(function(i) {
        $(this).delay(600*i).animate({opacity: "1"}, "slow");
    });
});

answered Jun 19 '11 at 00:58

user113716

318,772
63
451
440

+1 good alternate approach. But don't forget to fix up the `ready()` code :) – alex Jun 19 '11 at 01:01
@alex: Yeah, I got that, but I messed up by not using `.delay()`! Fixed. :o) – user113716 Jun 19 '11 at 01:03

David Wick · Answer 3 · 2011-06-19T17:29:59.060

1

This is perfectly possible with css3 animations, unlike the marked answers says.

To build on his solutions:

use keyframes and animation-delay to fire animations one after the other.

@keyframes 'fadein' {
    from { opacity: 0; }
    to { opacity: 1; }
}

just increase the animation-delay on each element to be the equal to the sum of the previous elements animation-duration values.

and of course make sure to use modernizr with a js fallback!

here's the complete solution for webkit; apply other browser prefixes as needed.

edited Jun 19 '11 at 17:29

answered Jun 19 '11 at 01:46

David Wick

7,055
2
36
38

Isn't it possible only if the animation loops? Otherwise, the elements return to their opacity:0 at the end. The second and third element can have a delay OR a persisted end state with "forwards", but not both, and in this case they seem to need both. – Deborah Jun 13 '16 at 23:39

Animate elements sequentially using CSS3 and jQuery

3 Answers3

Linked