jquery FadeOut为一个类，运行多次，而不是同时，y？

Question

我有一个包含几个div的页面，如：

         

默认情况下全部显示：none，我让用户点击显示某张卡片。

每次用户点击加载卡片时，我都会运行以下JQUERY：

$('.carditem').fadeOut( function() {alert(1)
// Animation complete show correct card
$('#' + toogleID).fadeIn();
});

令我惊讶的是，上面的警报发生了5次，而不是1次。这意味着fadeOut没有同时运行，而是循环遍历所有卡项目。这使得一个丑陋的动画闪烁。如何让fadeout同时运行所有匹配的类？或者只运行具有正在显示的div的类，这应该只有1张卡？

谢谢！

Answer 1

如果您取出停止动画的警报（导致偏移开始），它将按预期运行，至少在同步的初始动画方面。：

$('.carditem:visible').fadeOut( function() {
  $('#' + toogleID).fadeIn();
});

每个元素独立进行动画，如果你希望在 last 其中一个之后发生.fadeIn()，那么检查是否还有动画{ {3}}和.is()，如下所示：

$('.carditem:visible').fadeOut( function() {
  if(!$('.carditem').is(':animated')) //are any still animating?
    $('#' + toogleID).fadeIn();
});

选择器的:animated selector添加使得只有可见的选项被淡出，而不是显示/淡化它们。