Question

我有一个非常简单的页面，当用户点击页面上的特定条目时会显示状态更新。

这一切都很好。第一次单击会使用正确的输出更新id='sts'，6秒后会消失。

然而，如果用户点击另一个链接时它会消失，DIV会使用新文本进行更新，但会根据原始淡出时间逐渐消失。

无论如何让DIV更新再次启动淡入淡出计数器？

这就是我目前用来进行div更新的内容。

$('.first').click(function () {
    $("#sts").html('first update 1').show().fadeOut(6000);
});

$('.next').click(function () {
    $("#sts").html('second update 2').show().fadeOut(6000);
});

$('.last').click(function () {
    $("#sts").html('dinal update 3').show().fadeOut(6000);
});

由于

Answer 1

您需要使用 .stop( [clearQueue ] [, jumpToEnd ]) 。

停止匹配元素上当前正在运行的动画。

$("#sts").stop(true,true).html('first update 1').show().fadeOut(6000);

<强> Working Demo using stop

根据 A.Wolff 建议：

您可以使用.finish()替代.stop(true,true)

完成（）：

停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素的所有动画。

$("#sts").finish().html('first update 1').show().fadeOut(6000);

<强> Working Demo using finish

Answer 2

您可以停止当前fadeOut，然后再启动它。

要停止当前fadeOut，您可以执行以下操作：

$("#sts").stop().animate({opacity:'100'}).html('first update 1').fadeOut(6000);

开始后取消/停止jquery fadeOut

2 个答案: