jQuery和animate不能正常工作

我想为每个

.item

框设置延迟动画

我有两个问题：

我需要在设置动画时禁用“切换”，但使用

每一个
都非常棘手，因为它不像在PHP中那样工作-即使我在
每一个
之后将
bool设置为false
（如下面的示例），它也只会按元素的次数运行。如果我使用
animate（）
callback，它也会触发很多次

我还需要添加消失动画（只是反转）。我只是复制它并反转不透明度吗

---

---

我找到了你问题的部分解决办法。这解决了问题的第一部分

在这里，我使用

off（）

方法在所选元素上单击事件。因此首先需要使用

on（）

绑定click事件。请参考我提到的用于解除绑定的api文档，以澄清jQuery中的事件委派

您可以使用

is（':animated'）

检测元素是否处于动画状态

用于隐藏上次使用的元素

reverse（）

函数。在第一次单击时，需要首先显示元素，然后在第二次单击时运行动画，反之亦然

试着像下面这样。希望这对你有帮助

$（'.toggle'）。单击（函数（）{
变量项=$（'.item'）；
如果（item.is（'：animated'）返回；
if（item.hasClass（'open'））{
$.each（item.toArray（）.reverse（），函数（i，el）{
setTimeout（函数（）{
$（el）。设置动画({
“不透明度”：0
}，450，函数（）{
$（this.removeClass（'open'）；
});
}，50+（i*200））；
});
}否则{
$。每个（项目、功能（i、el）{
setTimeout（函数（）{
$（el）.addClass（'open'）.animate({
“不透明度”：1
}, 450);
}，50+（i*200））；
});
}
});
正文{
高度：1000px；
背景色：#222；
}
.切换{
高度：50px；
宽度：75px；
颜色：#fff；
文本对齐：居中；
线高：50px；
边框：2倍实心#fff；
边界半径：5px；
光标：指针；
}
.切换：悬停{
背景色：#fff；
颜色：#222；
}
.包裹{
位置：固定；
左：50%；
最高：50%；
边缘顶部：-125px；
左边距：-50px；
}
.项目{
高度：50px；
宽度：100px；
背景色：红色；
利润底部：4倍；
显示：无；
不透明度：0；
}
.项目.打开{
显示：块；
}

切换
您能同时显示您正在使用的HTML和CSS吗？@AtheistP3ace谢谢。你认为我可以用它的切换功能吗？动画完成后，是否能够将其切换回原来的状态？我正在尝试解决问题的第二部分。还不走运！非常感谢。我还试图从jQuery文档和旧的SO问题中找到一些有用的东西。这正是我需要的。谢谢你抽出时间！只是一个简单的问题：它是否也检测到
CSS关键帧动画
，或者只检测jQuery
animate（）
？只检测jQuery
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;
    }
});