开始后取消/停止jQuery FadeOut

问题描述

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

I've got a very simple page that shows a status update when a user clicks on specific entries on the page.

一切正常.第一次单击会用正确的输出更新id='sts'，在6秒钟后消失.

This is all working fine. The first click updates the id='sts' with the correct output, after 6 seconds this fades away.

但是，如果用户单击另一个链接逐渐淡化，则DIV会使用新文本进行更新，但DIV会根据原始淡出超时继续淡出.

However whilst it's fading if the user clicks another link the DIV is updated with the new text, but it continues to fade away based on the original fadeout time out.

是否要让DIV更新再次启动渐变计数器?

Anyway to have the DIV updates start the fade counter again ?

这是我当前用于进行div更新的内容.

This is what I'm currently using to do the div update.

$('.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);
});

谢谢

推荐答案

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

You need to use .stop( [clearQueue ] [, jumpToEnd ]).

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

使用Stop进行演示

Working Demo using stop

根据 A.Wolff 的建议:

As per A.Wolff suggestion:

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

完成():

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

使用完成功能进行演示

Working Demo using finish

这篇关于开始后取消/停止jQuery FadeOut的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！