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 aler开发者_开发百科t completed please do this with little jQuery code Thanks

---

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

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