Question

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

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

这里的问题是动画是链接的...这意味着，如果你一个接一个地翻转几个元素，动画就会继续前进和前进。

帮助？

Answer 1

如果动画仅适用于相同的元素，则链接。

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

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

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

Answer 3

如果它按照它的方式为你工作，除了动画没有停止，我猜这个问题不是动画的顺序，而你所需要的只是stop()：

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

稍微合并那些选择器。

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

3 个答案: