CODEWITHSUNDEEP
jquerytimefadeout
MacMan
MacMan

Reputation: 933

cancel/stop jquery fadeOut after begin

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

Upvotes: 9

Views: 1139

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82241

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

Upvotes: 8

twain
twain

Reputation: 1325

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

Upvotes: 1

Related Questions