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

I am not sure but try .on("click", function () ); will prob solve the issue. it just something i notice. — aahhaa, Dec 15 '14 at 14:09

score 7 · Accepted Answer · edited May 23 '17 at 12:20

7

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

edited May 23 '17 at 12:20

Community

1
1

answered Dec 15 '14 at 14:12

Milind Anantwar

81,290
25
94
125

***As a side note*** jQuery has a shorthand for `stop(true,true)`, the `finish()` method: `The .finish() method is similar to .stop(true, true) in that it clears the queue and the current animation jumps to its end value. It differs, however, in that .finish() also causes the CSS property of all queued animations to jump to their end values, as well.` – A. Wolff Dec 15 '14 at 14:18
@A.Wolff: you are right ... here is the working fiddle for it http://jsfiddle.net/vva6vfyv/ – Milind Anantwar Dec 15 '14 at 14:25

score 1 · Answer 2 · answered Dec 15 '14 at 14:11

1

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

answered Dec 15 '14 at 14:11

twain

1,305
11
16

cancel/stop jquery fadeOut after begin

2 Answers2

Linked