Question 37159 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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");
});
    Login or Signup to reply.
  2. 0

    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");
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search