jquery - jQuery：链接动画是一个问题，改进我的代码

Question

$(".info-graphic-data-box").fadeOut(200);
$(".info-graphic-content").fadeOut(200);
$("#" + currentContentId).parent().fadeIn(500);
$("#" + currentContentId).fadeIn(500);

所以，在这种情况下，我必须淡出两个元素，然后淡入不同的两个元素。

这里的问题是动画是链式的……这意味着，如果你一个接一个地翻转多个元素，动画就会继续进行下去。

帮助？

Answer 1

1-首先，创建对您的 DOM 对象的引用：

var $idgb = $(".info-graphic-data-box"),
    $igc = $(".info-graphic-content"),
    $cc = $("#" + currentContentId);

2-使用回调和链接来确保正确的动画执行：

$idgb.fadeOut(200, function(){
    $igc.fadeOut(200, function(){
        $cc.parent().fadeIn(500).end().fadeIn(500);
    });
});

3- 每当您认为可能与执行重叠时，请使用 stop() 方法取消任何当前正在运行的动画：

$cc.stop().parent().stop().fadeIn(500, function(){ $cc.fadeIn(500); });

以上是伪代码......不确定您希望动画如何真正在页面上工作（基于用户输入）。

Answer 2

如果它按原样为您工作，除了动画没有停止，我猜问题不是动画的顺序，您需要的只是stop()：

$(".info-graphic-data-box, .info-graphic-content").stop(true, false).fadeOut(200);
$("#" + currentContentId).fadeIn(500).parent().stop(true, false).fadeIn(500);

也稍微合并了这些选择器。

Answer 3

只有应用于相同元素的动画才会被链接。

要在添加新动画之前停止任何正在进行的动画，请使用该.stop()方法。