Question

我有一个包含ID为“blog-container”的div，以及一组带有“blog-item”类的子div。

我想要做的是逐个淡出“博客容器”中的所有“博客项目”，一个接一个地逐渐消失，然后以相同的顺序逐个淡出它们

有什么想法吗？

Answer 1

jQuery的.delay method允许在效果之前添加特定的时间延迟。您可以将此值与.each method结合使用，将延迟值乘以每个匹配元素的索引（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

编辑： @ idealmachine的版本绝对优越。 ;）我猜，我的jQuery知识有点过时了。 Upvoting。

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

然后做一些类似的事情来淡出。

注意：我没有对此进行过测试，可能会出现错误，但我认为一般的想法是合理的。

逐项淡出物品？

2 个答案: