Quick Tip: Prevent Animation Queue Buildup
read 22 commentsYou've probably stumbled upon a navigation powered by some jQuery effects during your web adventures. Of course you then ran your mouse back and forth over the navigation really fast to watch the animation repeat itself over and over and over again.
The natural queuing of animations/effects by jQuery makes the typical animation super easy to code and move on to more important tasks. However, sometimes the animation queue just gets in the way.
Here is an example of a navigation that has some effects applied to it via jQuery. Mouse back and forth over the links to see how the animations build up.
Here is the JavaScript that does the effect for the menu:
Now let's look at how we can prevent this undesirable behavior. Ready? Simply call the .stop()method before animating again. Here is the updated JavaScript that fixes the animation queue buildup by using the .stop() method.
Here is the navigation again, using the above JavaScript.
As you can see, the animation is no longer queued up by moving your mouse back and forth over the menu items.
You can even get bonus points for implementing something like the hoverIntent plugin that can add a slight delay before running the animation. Doing so makes sure the animation plays only if the user actually places the mouse on the element.
For more information about the .stop() method, visit the jQuery documentation page. To see a real-world example of the .stop() method in action, using its two arguments — clearQueueand goToEnd — check out the script Karl Swedberg put together at Little Orange Star.
22 Comments
hide pings4 Pings
[...] The rest is here: Quick Tip: Prevent Animation Queue Buildup » Learning jQuery … [...]
[...] building where the animation will loop repeatedly if the mouse is moved around quickly over it. An article on Learning jQuery covers this solution in greater [...]
Quick Tip: Prevent Animation Queue Buildup...
Thank you for submitting this cool story - Trackback from DotNetShoutout...
[...] a note about the stop() feature. This is a trick used to prevent animation queue buildup that I learned from an excellent article by Brandon [...]
Leave a Comment
Books
Authors
© Copyright 2006–2009 Learning jQuery and participating authors. Written content on this site is under a Creative Commons License.
Development by Karl Swedberg. Design by Rex Rainey. Published with WordPress.
Simple and incredibly effective; thanks!
Helpful article Brandon, thanks!
Another variation is to just use the stop() on the first (mouseover) function of hover() and not on the second (mouseout) function. Depending on what it is for, it can help smooth out the animations some.
I just tried Eric's suggestion of just using one stop() on the first hover() and it doesn't work for me. Still get a bad buildup if I don't use stop() on mouseover and mouseout. Just FYI
I struggled with this yesterday. Woke up this morning and saw this post. Thanks!
You wouldn't believe the myriad elaborate ways i've circumvented animation queue buildup in the past. This is a great little tip, as it's so simple yet so entirely unobvious to new jQuery users.
Simple but very nice effect, thanks...
Great tip!! Succinctly and ease of use , thanks!!
I'm having this very problem with a slider/AJAX app I am building. The slider sends the value to a PHP script to be calculated and then returned, but when I move the slider, it queues up the script every split second, and it takes a while for the values to catch up to the slider. I tried implementing the stop() method as shown here, but I don't think it works for my app. Here is the URL - http://mclindigital.com/tests/calculate.php.
@ mikemick
I wont comment on why you need to goto the server to do this however what you could do is implement a setTimeout on the ajax call. You can then cancel the timeout if the slide method is called again before the timeout period expires.
quick demo (un-tested) http://pastebin.me/49771a088320e
@redsquare
Thank you for the quick response. Yeah, this is a very simple example of what I am trying to do. Eventually this (among other UI elements) will use the PHP script to dynamically sort a recordset from a database. When I pasted your code, nothing came up in the browser window. I am assuming a syntax error? Anyways, this should put me on the right path. Thanks for you help.
when I said "sort" I meant "filter" a record set from a database
@ mikemick
Ah ok I understand now! Yeah my code was untested but if you put your stuff live I'll debug any issues.
Got it working now. I think you had forgotten the "}" before the ", 200);" on line 18. Thanks for you help.
That solved the exact problem I was having with a tutorial I'm writing. Thanks you!
After running into this problem numerous times I'm glad to finally see a solution. Nice job!
Great article man!
Great and simple trick for preventing buildup. Thanks for that.
However, I did pick up on one little quirk. Not sure if it's a typo on your part or a misunderstanding on my part but the function as you have it listed:
I use this on my website and it works fine:
Am I missing something or did you just mistype the "left" part?
Thanks!
No typo, I just animated the position instead of animating the padding like you did. It probably would have been a better choice to animate the padding!
One other thing, Shane: The reason it probably works for Brandon but not you is that animating the
leftproperty requires the element to be positioned, e.g.position: relativeorposition: absolute. If your element hasposition: static(which is the default for HTML elements), then it remains ... static.Yep, you're absolutely right Karl. I set the positioning in my blog and now just using "left" works. Thanks for the clarification. I'm still using "paddingLeft" because it keeps the link from moving out from underneath the mouse, but it's good to know the "why" of it.
if I move mouse cursor to the space between left border and Menu, it will unlimit reload. how to prevent it. it looks only occur on Firefox.
The behavior you are seeing is because I animated the left property of the li element. By doing so I'm actually moving the link out from under your mouse. I should have just animated the padding instead of the position.