jQuery step by step animation

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 s开发者_运维问答tep3 = 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?

is this is what you were asking?

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

The other option, if you are using jQuery 1.6, is to use the new syntax that allows you to use the Deferred behaviour for animations. For instance:

$.when($('#foo').animate({
    top: 100,
    left: 100
}, 3000)).pipe(function() {
    return this.animate({
        top: 0,
        left: 0
    }, 3000);
}).then(function() {
    console.log('done');
});

This code animates #foo, then when that animation is complete, the next one starts. When that one is complete, it logs "done" to the console. If you have many animations to do, this may be cleaner than doing multiple nested callbacks.

if you have any parent element then you can also apply following method. each() function is used to loop through each element of the target jQuery object.

 <div id="parent_div">
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Web Design And Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Android Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> iFone Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Wordpress Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Website Clone</p>
                        </div>

           <button class="btn btn-default" id="at_explorer">Explorer</button>

           <script>
                $("#at_explorer").click(function () {
                       $("#parent_div").children().each(function (index) {
                            $(this).delay(500 * index).fadeIn(300);
                        });
                    });
                </script>

This blog contains all fading effect Examples http://www.alphansotech.com/blogs/jquery-fadein-fadeout-examples/

$('span').each(function(i, el){
  setTimeout(function(){
    $(el).fadeIn();
  },100*i);
});

Using setTimeout like this inside of $.each allows you to animate any amount of elements in order. Adjust the 100*i to increase / decrease the duration between animations, and set the $(el).fadeIn(); to be any type of animation, obviously