cancel/stop jquery fadeOut after begin

Question

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

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

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.

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

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

Thanks

Answer 1

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

Stop the currently-running animation on the matched elements.

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

Working Demo using stop

As per A.Wolff suggestion:

You can use .finish() as an alternative to .stop(true,true)

Finish():

Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

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

Working Demo using finish

Answer 2

You could stop the current fadeOut and after that start it again.

For stopping the current fadeOut you could do something like this:

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