以相反的顺序隐藏元素

Question

我有一些通知，它们被归类到一些组中。我希望在单击 "X" 时清除移动 OS（样式）中该组中的所有通知。以相反的顺序延迟 1 秒。

到目前为止我已经这样做了：

$(document).ready(function () {
    $("#activity a.close-btn").click(function () {
        $.fn.reverse = [].reverse;
        var title = $(this).parent();
        var notifications = $(this).parent().next('ul');

        notifications.find('li').reverse().each(function (i, value) {
            if (i != 0) {
                setTimeout(function () {
                    $(value).hide('slide', {
                        direction: 'right'
                    }, 1000);
                }, 1000);
            } else {
                $(value).hide('slide', {
                    direction: 'right'
                }, 1000);
            }
        });
    });
});

它删除该组的第一个元素，然后（一秒后）删除其余元素。

这是一个 fiddle： http://jsfiddle.net/FakeHeal/65spykvr/

Answer 1

问题是超时，你在调用所有元素时延迟 1 秒

$(document).ready(function () {
    $("#activity a.close-btn").click(function () {
        $.fn.reverse = [].reverse;
        var title = $(this).parent();
        var notifications = $(this).parent().next('ul');

        notifications.find('li').reverse().each(function (i, value) {
            if (i != 0) {
                setTimeout(function () {
                    $(value).hide('slide', {
                        direction: 'right'
                    }, 1000);
                }, (i + 1) * 1000);
            } else {
                $(value).hide('slide', {
                    direction: 'right'
                }, 1000);
            }
        });
    });
});

以相反的顺序隐藏元素

Hide elements in reversed order

jquery

jquery-ui