Search code examples
javascriptjquerydelayfadein

jQuery FadeIn nested Images one after another

Hi JQuery Masters i need some help from you, i have some div's 


<div class="post">
    <div class="image-div">
         <img src="img" />
    </div>
</div>


<div class="column">
<div class="image-div">
<img src="img" />
</div>
</div>


<div class="sidebar">
<div class="image-div">
<img src="img" />
</div>
</div>


<div class="footer">
<div class="image-div">
<img src="img" />
</div>
</div>
with images (images are hide via css) in a document and i want to fadeIn images in div,s 1 after 1 with 500ms delay and when all images are fadeIn callback alert completed please do this with little jQuery code Thanks

Solution 
  • $("div.image-div").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

    Check working example at http://jsfiddle.net/Xc6jn/3/