CODEWITHSUNDEEP
javascriptjquerydelay
Pedro Gil
Pedro Gil

Reputation: 541

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

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

Upvotes: 2

Views: 6723

Answers (1)

Nick Craver
Nick Craver

Reputation: 630509

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.

Upvotes: 9

Related Questions