Question

I have a following html

<div class="post">
            <span class="fr">27.03.2012 - 14:07</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar.jpg" alt="awatar">
                <h3>Michał Lach</h3>
                <h4>Moderator</h4>
        </div>
        <!--koniec uzytkownik -->   
            <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
        </div>
            <div class="clear"></div>
        </div>
        <!--koniec posta -->    
        <div class="post">
            <span class="fr">27.03.2012 - 18:52</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar2.jpg" alt="awatar">
                <h3>Jan Kowalski</h3>
                <h4>Użytkownik</h4>
        </div>
        <!--koniec uzytkownik -->   
            <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
        </div>
            <div class="clear"></div>
        </div>
        <!--koniec posta -->    
        <div class="post">
            <span class="fr">28.03.2012 - 4:53</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar.jpg" alt="awatar">
                <h3>Michał Lach</h3>
                <h4>Moderator</h4>
        </div>
        <!--koniec uzytkownik -->   
            <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
        </div>
            <div class="clear"></div>
        </div>
        <!--koniec posta -->    

        <div class="post">
            <span class="fr">29.03.2012 - 16:28</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar2.jpg" alt="awatar">
                <h3>Michał Lach</h3>
                <h4>Moderator</h4>
        </div>
        <!--koniec uzytkownik -->   
            <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
        </div>

My idea is to hide all divs from the view, and then fadeIn all of them, but I only want to start the fadeIn method only after the fadeIn method finished on the previous div.

So far I have finished with this in jquery:

(function() {
  var post =  $('.post').hide();
  post.each(function(){
        $(this).fadeIn('slow');
        console.log('ok');
    });

})();

However it doesnt work, the result is that all the divs witch class post fadeIn at the same time, not one after another.

Any help ?

Thanks in advance.

Answer 1

Paul Irish has given three excellent ways to to this but he used fadeOut rather than FadeIn. I have mentioned the link below . You wont get a better solution I bet. http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

Below are the three ways he mentioned and are the best just go through the link.

Self-executing callback chaining

(function showVehicle(elem){
  elem.fadeIn('slow',function(){
    $(this).next().length && showVehicle($(this).next()); 
  });
})( $("div.vehicle:first") );

Custom event triggering

$('div.vehicle')
  .bind('showVehicle',function(e) {$(this).fadeIn('slow',function(){ 
    $(this).next().length && $(this).next().trigger("showVehicle"); 
  })})
  .eq(0)
    .trigger('showVehicle');

Self-executing callback chain on an arbitrary jQuery object

(function hidenext(jq){
    jq.eq(0).fadeOut("fast", function(){
        (jq=jq.slice(1)).length && hidenext(jq);
    });
})($('div#bodyContent a'))