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

Question

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

默认情况下都是 display:none，我让用户点击显示某张卡片。

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

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

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

谢谢！

score 2 · Accepted Answer

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

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

每个元素都独立动画，如果您希望在.fadeIn()最后一个元素之后发生动画，请检查是否有任何仍在使用.is()和:animatedselector动画，如下所示：

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

选择器的:visible添加是为了只有可见的才会淡出，而不是显示/淡出所有这些。

1 回答 1