jQuery每个和动画不能正常工作

Question

我希望为每个.item框添加延迟动画。

我有两个问题：

1. 我需要在动画时禁用切换但是each非常棘手，因为它在PHP中不起作用 - 即使我在bool to false之后设置each（如下例所示），它只运行它有多少元素。此外，如果我使用animate()回调 - 它也会多次触发。
2. 我还需要添加消失动画（刚刚反转）。我只是复制它并反转不透明度吗？

var isAnimating = false;

$('.toggle').click(function() {

    //Only run it if it's not animating
    if(!isAnimating) {

        isAnimating = true;

        menu.toggleClass('open');

        item = $('.item');

        $.each($(item), function(i, el) {

            $(el).css({'opacity': 0});

            setTimeout(function() {
                $(el).toggleClass('open').animate({
                    'opacity': 1.0
                }, 450);
            },50 + ( i * 200 ));

        });

        //It just triggers it as many times as there are elements..
        isAnimating = false;
    }
});

Answer 1

1. 您可以使用window.onload = function(){ start(); }; 检测元素是否为animationg。
2. 用于隐藏上次使用is(':animated')函数的元素。首先需要首先显示元素，然后在第二次单击时运行动画，反之亦然。

尝试以下内容。希望这会对你有所帮助。

reverse()

$('.toggle').click(function () {

        var item = $('.item');

        if (item.is(':animated')) return;

        if (item.hasClass('open')) {
            $.each(item.toArray().reverse(), function(i, el) {
                setTimeout(function() {
                    $(el).animate({
                            'opacity': 0
                        }, 450, function() {
                            $(this).removeClass('open');
                        });
                }, 50 + (i * 200));
            });
        } else {
            $.each(item, function (i, el) {
                setTimeout(function () {
                    $(el).addClass('open').animate({
                        'opacity': 1
                    }, 450);
                }, 50 + (i * 200));
            });
        }
});

body {
        height: 1000px;
        background-color: #222;
    }

    .toggle {
        height: 50px;
        width: 75px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        border: 2px solid #fff;
        border-radius: 5px;
        cursor: pointer;
    }

        .toggle:hover {
            background-color: #fff;
            color: #222;
        }

    .wrap {
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -125px;
        margin-left: -50px;
    }

    .item {
        height: 50px;
        width: 100px;
        background-color: red;
        margin-bottom: 4px;
        display: none;
        opacity: 0;
    }

        .item.open {
            display: block;
        }

Answer 2

我找到了你问题的部分解决方案。这个fiddle解决了问题的第一部分。

在这里，我使用off()方法unbind所选元素上的click事件。因此，需要首先使用on()绑定click事件。请参阅我提到过的关于unbind的api文档，以澄清jQuery中的事件委托。