CODEWITHSUNDEEP
javascriptjquery
trivido trivido
trivido trivido

Reputation: 61

Run jquery function between delay() function

after successful ajax call I have jquery open toast function:

    function successMessage() {
        $("#toast_success").show("slow").delay(3000).hide("slow");
    }

Some people might want to close that toast before 3s [ delay(3000) ]:

    $(".toast_close").on('click', function() {
        $("#toast_success").hide("slow");
    });

Unfortunately on click event do not work, message dissapears after 3seconds, and thats it. Any suggestions how to make work "$(".toast_close").on('click', function()" ?

Upvotes: 1

Views: 71

Answers (2)

Muhammad Irfan
Muhammad Irfan

Reputation: 17

The .delay() method allows us to delay the execution of functions that follow it in the queue. SO we need to stop the animation queue. For Stoping the animation we use stop(true) or stop() method and then hide slowly.

$(".toast_close").on('click',function(){  
     $("#toast_success").stop().hide("slow");
});

Upvotes: -2

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because the delay() call is still on the animation queue. The hide() method, when called with a time argument, will also use the animation queue. As such, the hide() is blocked until delay() ends.

To fix this, either use hide() with no argument, although this may be jarring in your UI, or call stop(true) to clear the animation queue before you call hide():

$(".toast_close").on('click', function() {
  $("#toast_success").stop(true).hide("slow");
});

Upvotes: 3

Related Questions