Run jquery function between delay() function

Question

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()" ?

Rory McCrossan · Accepted Answer · 2022-08-12 09:01:37Z

3

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");
});

answered Aug 12, 2022 at 9:01

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Irfan · Accepted Answer · 2022-08-12 09:16:51Z

-2

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");
});

answered Aug 12, 2022 at 9:16

Muhammad Irfan

174 bronze badges

1 Comment

trivido trivido Over a year ago

Thats exactly what Tamir Abutbul wrote, but thank you!

Collectives™ on Stack Overflow

Run jquery function between delay() function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related