How to start / stop / restart jQuery animation

Question

I have the following function, which when called, displays a message to the user for a certain amount of time (5 seconds in my case). During this “period”, if I call the function again to display another message, it should hide it and then reappear with a new message for another 5 seconds.

What happens to my code below, I call a function to display a message. Then, say, in the 4th second, I call it again to display another message, a new message is displayed for 1 second.

I need somehow - reset - time, but I can’t figure out how to do this. I tried to stop the animation, checking if the element was visible and hiding it, if it was, and much more. I believe that the solution is a simple chain problem, but cannot get it right. Therefore any help would be appreciated!

function display_message(msgType, message) { var elem = $('#ur_messagebox'); switch (msgType) { case 'confirm': elem.addClass('msg_confirm'); break; case 'error': elem.addClass('msg_error'); break; } elem.html(message); elem.show().delay(5000).fadeOut(1000); } 

thanks in advance...

Answer 1

In short, you cannot use .delay() for what you want. This is just a wrapper for setTimeout() in the next element of the queue, you can see the source here , an important role:

  return this.queue( type, function() { var elem = this; setTimeout(function() { jQuery.dequeue( elem, type ); }, time ); }); 

So this is just the sequence of setTimeout() , which, when executed, discards the next element in the queue and executes it. So what happens, you added a delay, and even with .stop(true) or .clearQueue() , when you queue .fadeOut() after that, you add it back to the same fx , so when this setTimeout() ends after 5 seconds, he captures a new one that drops into the queue and executes it.

You need setTimout() and clear it manually, since the jQuery core does not have this built-in, something like this:

 function display_message(msgType, message) { var mb = $('#ur_messagebox') .addClass(msgType === 'confirm' ? 'msg_confirm' : 'msg_error') .html(message) .stop(true, true).fadeIn(); if(mb.data('delay')) clearTimeout(mb.data('delay')); mb.data('delay', setTimeout(function() { mb.fadeOut(1000); }, 5000)); } 

Here you can see a working demo.

Answer 2

As Nick pointed out:

In short, you cannot use .delay () for what you want.

But there is a simple way: instead of using .delay(x) just use .fadeTo(x,1) .

In principle, this will disappear to full opacity, but since the message box already has full opacity, it does nothing except to delay the following animations for x milliseconds. The advantage is that .fadeTo() can be stopped / aborted with .stop(true) .

Answer 3

Try it.

 elem.stop().show().delay(5000).fadeOut(1000); 

Answer 4

I was getting CSS conflicts because you never deleted the msg classes before adding another, so I cleared them with elem.removeClass('msg_confirm msg_error'); in addition to fixing the problem:

 function display_message(msgType, message) { var elem = $('#ur_messagebox'); elem.removeClass('msg_confirm msg_error'); switch (msgType) { case 'confirm': elem.addClass('msg_confirm'); break; case 'error': elem.addClass('msg_error'); break; } elem.stop().css({opacity:1}).clearQueue(); elem.html(message); elem.show().delay(5000).fadeOut(1000); } 

So, with elem.stop().css({opacity:1}).clearQueue(); I stop the animation, reset the opacity in the event that it was in the middle of fading and cleared the queue before adding a message and restarting the queue. I tested this and it should work for you.

Answer 5

I restart the animation this way: (not sure if everything is correct, but)

$ (element) .stop () clearQueue () ;.

$ (element) .delay (20) .animate ({...});

Answer 6

if you are using jQuery, just end the current animation before restarting:

 tooltip.finish();// set a defined start for animation tooltip.show(); tooltip.delay(4000).fadeOut(1500);