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

Question

我有一个页面，其中有几个 div，例如：

默认情况下，所有 div 都是显示：无，我让用户单击以显示特定的卡片。

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

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

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

谢谢！

Answer 1

如果您取出停止动画的警报（导致偏移开始），它会按预期运行，至少在初始动画同时进行时是这样。：

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

每个元素确实独立地进行动画处理，如果您希望 .fadeIn() 在 最后其中一个，然后检查是否有任何仍在使用 .is() 进行动画处理 和 :animated 选择器，像这样：

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

:visible 添加到选择器以便只有可见的内容淡出，而不是显示/淡出所有内容。