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

Posted 2023-05-08

【中文标题】jQuery：链接动画是一个问题，改进我的代码

【英文标题】：jQuery: Chained Animations Are An Issue, Improving My Code

【发布时间】：2012-08-01 00:27:06

【问题描述】：

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

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

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

帮助？

【参考方案1】：

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

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

【讨论】：

是的，但我不想stop 动画就在中间......而是阻止它不断发生。几乎就像跳到队列的末尾。

@dcolumbus 您将需要提供您的标记，最好是一个演示“不良”行为的 jsfiddle。

@dcolumbus 你不会“停止”动画并让元素保持原样，你会“停止”动画然后排队替换它，所以它在那之后完成。跨度>

【参考方案2】：

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); );

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

【讨论】：

缓存 DOM 元素只使用一次什么都不做，否则我倾向于同意。

它更干净，更易于维护。只是一个好习惯......但是，如果只使用一次，就像你说的那样，绝对没有必要。

【参考方案3】：

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

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

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