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

所以，在这个例子中，我必须淡出两个元素，然后淡入另两个元素

这里的问题是动画是链接的。。。这意味着，如果滚动多个元素，一个接一个，动画会一直滚动

---

帮助？

动画仅在应用于相同元素时才链接

---

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

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

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

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

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

3-每当您认为执行过程中可能存在重叠时，请使用stop（）方法取消任何当前正在运行的动画：

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

---

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

如果它以这种方式为您工作，除了动画不停止之外，我猜问题不在于动画的顺序，您所需要的只是

stop（）

：

---

合并了一些选择器。

是的，但是我不想<代码>停止<代码>中间的动画…而是防止它继续发生。几乎就像跳到队列的末尾一样。@Dclombus您需要提供标记，最好是一个演示“坏”行为的JSFIDLE。@Dclombus您不需要“停止”动画并保持元素不变，您需要“停止”动画，然后将要替换的元素排入队列，所以在那之后就结束了。缓存DOM元素只使用一次不会有任何作用，否则我倾向于同意。它更干净，更易于维护。只是一个好习惯。。。但是，如果永远只使用一次，就像你说的那样，绝对没有必要。

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

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