Jquery .delay().fadeOut cancel/clear queue.. Is it possible? How?

Question

I need some help here.. Is it possible to cancel the chaining delay?

Mn.Base.TopBox.show = function(timedur){
    $('#element').fadeIn().delay(timedur).fadeOut();
}


Mn.Base.TopBox.cancelFadeout = function(){

}

I read about queuing and tried some different approaches but I hadn't success...

    $('#element').stop();

    $('#element').queue('fx', []);

---

Thanks in advance,

Pedro

Answer 1

It isn't, .delay() doesn't play well with anything else since the timer keeps ticking and a .dequeue() is executed when it's up...regardless of if you cleared the queue and added a whole new one.

It's better to use setTimeout() directly if you intend to cancel, for example:

Mn.Base.TopBox.show = function(timedur){
  $('#element').fadeIn(function() {
    var elem = $(this);
    $.data(this, 'timer', setTimeout(function() { elem.fadeOut(); }, timedur));
  });
}

Mn.Base.TopBox.cancelFadeout = function(){
  clearTimeout($('#element').stop().data('timer'));
}

What this does is set the timer and store it using $.data(), and when clering the animations, we're both calling .stop() to stop anything in process, and stopping that timer.

There's still the potential here for issues if you're firing this very rapidly, in which case you'd want to switch to storing an array of delays, and clear them all.