Fading objects due to one after another?

Question

I have a containing div with the id "blog-container" and a set of sub-divs inside inside with the classes "blog-item".

What I want to do is the gradual disappearance of all the “blogs” in the “blog container” one by one, one after another, and then their gradual disappearance in the same order.

Any ideas?

Answer 1

jQuery .delaymethod allows you to add a specific time delay before the effect. You can combine this with the method by .eachmultiplying 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);
});

Answer 2

EDIT: @idealmachine, , .;) jQuery , . Upvoting.

fade jQuery , . :

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++;
}

- .

. , , , .