开始后取消/停止 jquery fadeOut

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

这一切工作正常。第一次点击更新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);
});

Thanks

你需要使用.stop([清除队列][jumpToEnd]) http://api.jquery.com/stop/#clearQueuegotoEnd.

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

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

使用 stop 进行工作演示 http://jsfiddle.net/wjzbhv5p/

As per A.Wolff https://stackoverflow.com/users/1414562/a-wolff建议：

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

结束（）：

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

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

使用完成的工作演示 http://jsfiddle.net/vva6vfyv/