CODEWITHSUNDEEP
jqueryfunctionqueue
Nadim
Nadim

Reputation: 404

How to clear (to remove) all the queued functions in jQuery?

I would like to know how to clear (to remove) all the queued functions in jQuery? This is the code that I have:

var a = $('<div class="notification" style="bottom:'+ind+'px">Message envoyé '+i+'<span class="close">x</span></div>')
   .fadeIn(1000,"linear").delay(5000).fadeOut(3000,"linear");

I would like to remove the functions "fadeIn", "delay" and "fadeOut". I tried with dequeue() and with clearQueue() but it didn't work correctly. So how to do that?

Upvotes: 2

Views: 2443

Answers (2)

newbie
newbie

Reputation: 51

Long Answer (For Deep understarting)

IMPORTANT ! this answer is Long. and not meant to replaced the best Short answer at all. But rather as understanding it more by playing with the demo.

So, First of...

I am founding the Best Demonstration in this following jQuery Site link: jQuery.finish()

So, please appreciate your time if your just need to finish up your project ASAP. and of course you can came back anytime to it, as i also just made for my self. which is very good (Future) reference too.

It's show a very good Demo example in all of the scenarios that you could possible can across by. (to my humble opinion anyway)

Also, This jQuery .clearQueue link can really clear things up way better as "All of" or "Most of" those functions API are related in one way or another! (NOT 100% Accurate, but bare in mind.) so, don't get mislead by me (don't have yet experience with those all)

When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue. When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. In this way it is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.

On a personal note: I was just looking for a good Scroller (yes, the old Marquee) and end up running it with no plugins (not at first, didn't found good one. and only it's very easy with jQuery) but only with jQuery.animate() function which did the trick for me. (Good Job jQuery Community!!)

the problem that i run into is, after using setTimeout and function that call it self so the animate will repeat infinity, i ended up running multiple animation at once (after a while) and needed to reset it all. so clearTimeout (for the setTimeout) and .stop(true) for the .animate() really helped me! afterward i could restart it as many times as i wanted too and now i know, there isn't animate still on the air!

Upvotes: 1

jfriend00
jfriend00

Reputation: 707318

Once you've started an animation, you can stop it and clear any other queued animations by calling this on the objects that are animating:

$(yourobj).stop(true);

Or, in your case (since the jQuery object is in the variable a, it would be:

a.stop(true);

As you can see from the jQuery doc for .stop(), the first argument tells it to clear the queue of any other animations that are queued up to go.

Note, your code by itself isn't complete because you've created some DOM elements, but not added them to the page so they won't be visible until you do. I'm assuming you have that code, but just didn't include it.

If what you're really trying to do is this:

  1. Popup bubble that, when left on its own will fadeIn, stay on screen for a certain amount of time and then fade out
  2. If, at anytime while the bubble is showing, the user mouses over it, you want to snap it to full opacity and stop any animations so it remains forever as long as the mouse is over it.

  3. Then if the mouse is moved out of it, you want it to stay on screen for a short time, then fadeout.

            var a = $('<div class="notification" style="bottom:'+ind+'px">Message envoyé '+i+'<span class="close">x</span></div>')
          .fadeIn(1000,"linear").delay(5000)
          .fadeOut(3000, "linear", function() {
              $(this).remove();
          })
          .mouseover(function() {
              $(this).stop(true).css("opacity", 1);
          }).mouseleave(function() {
              $(this).delay(2000).fadeOut(3000, "linear", function() {
                  $(this).remove();
              });
          });
        $('body').append(a);

You can see it in action here: http://jsbin.com/ziwexifo/1/edit

In your jsBin code, I honestly have no idea what you're trying to do with the .promise().done() code because I find the variable names non-descriptive so they don't help me know what you're trying to do and there are no comments. If you're going to use .stop() to prematurely cancel the animation sequence, you will probably have to do something different than using the .promise().done() for all clean up work. I've used the animation completion functions in my code.

Upvotes: 5

Related Questions