为什么我的jQuery/CSS动画只能在第一次单击时工作？

我试图使一个元素淡出，然后在每次单击链接时淡入。我有下面的代码，出于某种奇怪的原因，它只在第一次点击时起作用。 演示：

$（“body”）。在（'click'，'a'，function（）{
$（“div”）.removeClass（'fade'）.addClass（'fade'）；
})

.fade{
动画：fadeinout.5s；
}
@关键帧淡入淡出{
0%，100%{不透明度：1；}
50%{不透明度：0；}
}

$（“div”）.removeClass（'fade'）.addClass（'fade'）

将以相当快的速度执行，并且在功能上，您只需使用

fade

类即可

根据您希望应用类的顺序，您可能希望向

addClass

和

removeClass

这是一个示例，

removeClass

调用将立即执行，

addClass

将在延迟后发生

$（“body”）。在（'click'，'a'，function（）{
$（“div”）.addClass（'fade'）
setTimeout（函数（）{$（“div”）.removeClass（'fade'）}，1000）//1000毫秒
})

.fade{
动画：FadeInOut1s；
}
@关键帧淡入淡出{
0%，100%{不透明度：1；}
50%{不透明度：0；}
}

您可以收听

animationend

事件并删除其中的类

$（“body”）。在（'click'，'a'，function（）{
$（“div”）.addClass（'fade'）.one（'animationend'，function（）{
$（this.removeClass（'fade'）；
});
})

.fade{
动画：fadeinout.5s；
}
@关键帧淡入淡出{
0%，100%{不透明度：1；}
50%{不透明度：0；}
}

根据您希望获得的行为，您可能希望在

removeClass

上实际添加超时，以便它在一段时间后消失。最后一点要注意的是，如果您有多个这样的元素，在将

e

传递给click handler函数后，您可能希望将常规

$（'div'）

替换为

$（e.currentTarget）

。感谢您的解释。我宁愿先添加类，然后设置超时来删除itOkay@Luvias，因为我根据你的笔记编辑了它——我还扩展了动画和超时，以使它更清楚地显示它在做什么。你可以调整动画和超时，直到你得到你想要的效果。我将此标记为最佳答案。谢谢大家的帮助我没有意识到你只能听css动画。我一直在等待css动画，它是通过添加一个类开始的。最后我找到了最好的解决办法。谢谢你！