Delay not reinitialized correctly in jquery animation queue

Question

I have a problem with the animation queue of my message box ...

I made a function to notify the user of errors or information from the application. The message is displayed for 5 seconds (delay), but the user has the opportunity to hide it by clicking on the cross button in msgbox.

What I wanted: a call to notify () will shift my msgbox and auto fadeOut () messages after 5 seconds. Calling notify () before the delay of 5 seconds will hide () the current msgbox and push down the new msgbox, which again will automatically fadeOut () after 5 seconds.

What my code really adds: If I recall my "notify ()" function before the delay expires, the msgbox will be hidden correctly, but the delay of the fresh msgbox displayed will be shorter than my 5 seconds ...

I tried using the jQuery function ".stop (true, true)" to reset the delay, but it does not work. Does anyone know how to solve my problem?

Here is the fiddle of my snippet: http://jsfiddle.net/wvqkT/ , To see the problem, click the button, wait 2 seconds, then click the button. Do it 5 times and you will see that msgbox will disappear soon ...

Here is the code of my function

function notify(type, message) { $('#notificationMessage').stop(true, true).hide(); var classes = 'info warning success error'; $('#notificationMessage').removeClass(classes); var types = classes.split(' '); var title = ""; if (type === types[0]) { title = "Information"; } else if (type === types[1]) { title = "Attention"; } else if (type === types[2]) { title = "Succès"; } else if (type === types[3]) { title = "Erreur"; } else { title = "Information"; type = types[0]; } $('#notificationMessage').addClass(type); $('#notificationMessage h3').empty().append(title); $('#notificationMessage p').empty().append(message); $('#notificationMessage').slideDown({ queue: false }).delay(5000).fadeOut(3000); } $('#btn').on('click',function(){ notify($('#type').val(),"This is the message to show...."); }); 

thanks for the help

Answer 1

The problem is that you cannot undo Delay() , you should use setTimeout () instead.

 var timeout; function notify(type, message) { //..your old code here $('#notificationMessage').slideDown(function(){ clearTimeout(timeout); timeout = setTimeout(function() { $(this).fadeOut(3000) }, 5000); }) } 

jsFiddle

On the jQuery page:

The .delay () method is best suited to delay between jQuery queues for consequences. Since it is limited - it, for example, does not offer a way to cancel the delay..delay () is not a replacement for the native JavaScript setTimeout, which may be more suitable for certain use cases.

Answer 2

As for jquery 1.9, now you can use the finish() method, which clears the timeout used by the delay method {hooks.stop.call (this, true); }

NOTE: in your code example, you need to press the slideDown () method in the queue without explicitly using queue: false

 $('#notificationMessage').finish().hide(); 

See DEMO