Question

I want three elements to fade in one after another.

<span class="a">Step 1</span>
<span class="b">Step 2</span>
<span class="c">Step 3</span>

Here is my JS attempt with when() and done() (also see http://jsfiddle.net/wU9Qf/):

var step1 = $(".a").fadeIn(3000);
var step2 = function(){$(".b").fadeIn(3000);};
var step3 = function(){$(".c").fadeIn(3000);};

$.when(step1).done(step2);

I want the fadeIn() step by step (step 1 > step 2 > step 3) – how do I do this?

Answer 1

is this is what you were asking?

$(".a").fadeIn(3000,function(){
    $(".b").fadeIn(3000, function(){
        $(".c").fadeIn(3000);
    });
});