Fading items out/in one by one?

I have a containing div with an ID of "blog-container" a开发者_运维问答nd a set of sub-divs inside that with classes of "blog-item".

What I want to be able to do is fade all of the "blog-items" in "blog-container" out one by one, one after the other, and then fade them back in one by one in the same order.

Any ideas?

jQuery's .delay method allows adding a specific time delay before the effect. You could combine this with the .each method, multiplying the delay values by the index of each matched element (live demo):

var items = $('div#blog-container div.blog-item');

items.each(function(index, element) {
    $(element)
        .delay(index * 600)
        .fadeOut(600)
        .delay(items.length * 600)
        .fadeIn(600);
});

EDIT: @idealmachine's version is definitely superior. ;) My jQuery knowledge is a little out-of-date, I guess. Upvoting.

The jQuery fade effects have optional function call backs which you can use to trigger the next event. Here's how I would do it:

var blog_item_idx = 0;
function fadeItemsOut() {
    items = $(".blog-item");
    if (blog_item_idx >= items.length) {
        return;
    }
    item = items[blog_item_idx];
    item.fadeOut('slow', fadeItemsOut);
    blog_item_idx++;
}

And then do something similar for fading in.

Note: I haven't tested this, there may be an error there somewhere but I think the general idea is sound.