jQuery 每个和动画都无法正常工作

Question

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

我有两个问题：

我需要在动画时禁用切换，但使用 each 非常棘手，因为它不像 PHP 那样工作 - 即使我在 each 之后设置 bool to false （就像下面的例子），它运行它的次数与元素的数量一样多。此外，如果我使用 animate() 回调 - 它也会触发多次。
我还需要添加消失动画（只是反转）。我只是复制它并反转不透明度吗？

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

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

这里我使用off()方法来unbind选中元素的点击事件。因此首先需要使用 on() 来绑定点击事件。请参考我提到的 api 解绑文档，以澄清 jQuery 中的事件委托。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">Toggle</div>
<div class="wrap">
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
</div>

jQuery 每个和动画都无法正常工作

jQuery each and animate not working correctly

each

jquery