Quick Tip: Prevent Animation Queue Buildup

read 96 comments

You'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:

JavaScript:
  1. $(document).ready(function() {
  2.     $('ul.anim_queue_example1 a')
  3.         .hover(function() {
  4.             $(this).animate({ left: 20 }, 'fast');
  5.         }, function() {
  6.             $(this).animate({ left: 0 }, 'fast');
  7.         });
  8. });

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.

JavaScript:
  1. $(document).ready(function() {
  2.     $('ul.anim_queue_example2 a')
  3.         .hover(function() {
  4.             $(this).stop().animate({ left: 20 }, 'fast');
  5.         }, function() {
  6.             $(this).stop().animate({ left: 0 }, 'fast');
  7.         });
  8. });

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 — clearQueue and goToEnd — check out the script Karl Swedberg put together at Little Orange Star.

Update: This article has been translated into Belorussian.

comment feed

96 comments

  1. Nicolas Mutis

    Simple and incredibly effective; thanks!

  2. 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

  3. I struggled with this yesterday. Woke up this morning and saw this post. Thanks!

    • this article is too old! you don't need another plugin to stop the queue... just use queue:false in animate function...

      sample code:

      
         $('#social li').hover(
            function () {
            	$(this).addClass('visible').animate({ width: "85px"}, {queue:false, duration:300} );
            },
            function () {
             $(this).removeClass('visible').animate({ width: "21px"}, {queue:false, duration:300 } );
            }
          );
      

      However, I still couldn't find a way to stop the queue for fadeIn/fadeOut type of events...

      • If you need to clear the queue while using fadeIn or fadeOut (rather than the more generic animate function) you'll need to explicitly set both .stop() parameters to true.

        For example:

        
            $('#e_newsletters').hover(function() {
                $('#flyout_btn').stop(true, true).fadeIn();
            }, function() {
                $('#flyout_btn').stop(true, true).fadeOut();
            });
        
        • kj

          yep. adding the prams(true, true) rolls out the animation to the end point. works the best for my needs. I needed custom animation not just switching classes. Boxes were dynamic sizes and animated accordingly.

        • Steven

          This works great ! Thanks for great tips !

    • the old solution is better than yours...
      yours have a weird bug when hover and mouseout fast, it remains on the default color while i'm hover and never changes... the old solution doesn't do that.

      anyway thank you for this solution, i'll keep it in mind :D

      cheers

  4. 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.

  5. Simple but very nice effect, thanks...

  6. asamoon

    Great tip!! Succinctly and ease of use , thanks!!

  7. 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.

    • redsquare

      @ 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

  8. redsquare

    @ mikemick
    Ah ok I understand now! Yeah my code was untested but if you put your stuff live I'll debug any issues.

  9. That solved the exact problem I was having with a tutorial I'm writing. Thanks you!

  10. Jamie

    After running into this problem numerous times I'm glad to finally see a solution. Nice job!

  11. Great article man!

  12. 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:

    .hover(function() {
                $(this).stop().animate({ left: 20 }, 'fast');
            }, function() {
                $(this).stop().animate({ left: 0 }, 'fast');
            });
    

    I use this on my website and it works fine:

    .hover(function() {
                $(this).stop().animate({ paddingLeft: 20 }, 'fast');
            }, function() {
                $(this).stop().animate({ paddingLeft: 0 }, 'fast');
            });
    

    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 left property requires the element to be positioned, e.g. position: relative or position: absolute. If your element has position: 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.

  13. KK

    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.

  14. I use the hoverIntent plugin for hover related events, but this is cool for the animate() method.

  15. Patrik

    How do you do to get easein to work with animate? I have downloaded jQuery UI with Select all components but it dont work

    
    $("p").animate({
          "opacity": "show"
        }, { "duration": "slow", "easing": "easein" });
    

    works if I remove , "easing": "easein" but it works if I include jquery.easing.min.js shouldn't it work whit jquery-ui-personalized-1.5.3.min.js
    "Extends the internal jQuery effects, includes morphing, easing and is required by all other effects."

  16. Thanks for cool tutorial. I just re-write this tutorial in my site with Indonesian language.

    Check it out http://achmatim.net/2009/02/02/efek-animasi-sederhana-pada-menu-dengan-jquery/

  17. Actually I liked first example. It's kind of cool effect :-)

    • mike

      Viktar, it is a cool side-effect. I had a similar side effect where LI items would open top and bottom. Looked neat until the lower LI items would just bound, and bounce, and bounce. Ugly. This fixed it nicely.

  18. John

    wow,

    very nice..

    Can you please show me the entire html, css and JS for that.

    if its fine with you..

  19. Cristian Necula

    Thank you very much for this easy solution. I was having the exact same problem in my custom navigation.

  20. Awesome! You just saved my day :-)

  21. Adam Karpuszka

    Great article Brandon. However, I am having a problem implementing this technique in some of my code. I have a span element within a td element and wish to animate the span when the td is hovered over (making a tool tip, essentially). I am selecting the span using the find() method. The stop() method is not having any effect and my animation queue is still building up. Any ideas on why using the find() method is affecting this? Javascript below:

    
    $("td.first").hover(function () {
          $(this).stop().find("span").slideDown(500);
        },
    	function () {
          $(this).stop().find("span").slideUp(500);
        });
    			});
    
  22. spaceage

    Cool story--thanks!

    stop() only seems to deal with the "animation" queue--what if I have a .hover() set up with a simple show/hide toggle in the functions? I have this same issue with excess events queuing. Is there a way to deal with this?

  23. Nice. I somehow 'needed' to know how to do that. I have a site where buildups like this should be stopped. Good thing I looked in here ;)

  24. This is perfect!! I've been moaning about this animation build up for ages. I really like a fade effect I have on my site, and almost removed it right before i found this. Thank you, and it was so simple too.

  25. Hi,
    I sometimes even use "stop(false, true)" to make sure that all works nice.

    Janis

    • И всё таки вы написали..

    • This solved my opacity show hide animation issue.

    • Sam

      Thank you so much for this!! It helped me with the issue when using find() and animate.

      $(".featurelinks").hover(function() {
      $(this).find('.featureimg').stop(false, true).animate({ width: 'hide' }, 'slow');
      }, function () {
      $(this).find('.featureimg').stop(false, true).animate({ width: 'show' }, 'slow');
      });

      works perfectly!

  26. Awesome article. I knew just where to put this to use in an older project. I'm kind of a stickler for perfect and here's an issue that I'm having: If I hover real fast over each item with the .stop() in use it will move just 1mm out and then move back. It makes it looks a little jittery. I'm thinking one way this can be stopped is if we could somehow tell the Jquery first wait half a second, then move the item to the left 20px, then move it back immediately when the user leaves the mouse. That way if someone were frantically hovering over each item they wouldn't get that immediate movement and jittery look.

    Are you following me? I apologize if that were hard to explain. One question to sum it up: Is there a way to tell JQuery to wait half a second before actually moving the item to the left 20 px?

    Thanks All!
    Dan B. Lee

  27. Karl Adler

    Hi,
    is there a similar effekt for Picture slidein/out?

    stopping sliding works like a pausing i think...

  28. Sven Motz

    Lol now that's insanley easy and effective you made my day =)

  29. I came to another solution - the hoverFlow plugin:

    While the stop()-method prevents animation queue buildup, it introduces another problem: When you do a fast mouseover/-out, you will see no animation at all or just a part of the animation. This behavior seems somehow unnatural.

    In my opinion, a single (and fast) mouseover/-out should result in a full animation cycle. The classical hoverIntent-plugin can't help here since it does the exact opposite: Triggering the event after a longer timespan.

    Ideally, all animations should only play if they correspond with the current (that is, when the animation is dequeued, not when the event was triggered) mouse position. A mouseover animation will only run if the mouse is currently over the element, and a mouseout animation will only run if the mouse is currently not over the element. Otherwise, the animation queue is emptied.

    The hoverFlow plugin does exactly that! The easiest way to compare the different approaches is to have a look at the plugin homepage:

    http://www.2meter3.de/code/hoverFlow/

    HTH

    • Ricardo

      This achieves a similar effect to the hoverFlow plugin (still some cuts if you go nuts with the mouse):

      
      function dequeue(){
         $(this).dequeue();
      };
      $('#menu .item').hover(function(){
         $(this).animate({marginLeft: '20px'}, 200, dequeue);
      }, function(){
         $(this).animate({marginLeft: '0px'}, 200, dequeue);
      });
      
  30. Hello. Just learning jQuery and this issue has been driving me nuts. I am aware of Hoverflow, but it seems like I should have been able to get stop() to work for the simple dropdown menu I was creating with slideDown/slideUp. The problem I was having was mentioned above...

    Basically, if you move the mouse over a bunch of times, the animation starts only triggering a little but not completing until it stops happening at all. I fixed this by setting the gotoEnd to True, but then I ran into an issue where if I hover off and then back on it endlessly flashes from being animated to nothing. After a bunch of trial and error here was the perfect solution :

    
    	$("#btn_products").hover(
    		function() {
    			$("#menu_widget").stop(true, true).slideDown("normal");
    		},
    		function() {
    			$("#menu_widget").slideUp("normal");
    		}
    	);
    

    It seems no stop on the mouseout WITH gotoEnd set to true fixes it perfectly.

    • Jason,
      Your example was similar to my own situation in building a nav using one unordered list nested within a parent unordered list .

      My original source of inspiration in building my navbar is from
      designreviver

      Building off of that I used your example provided. To add some animation and fix the hover error. Everything works perfectly in IE (amazing!), but every version of FF I've tested in will fire a "display" on the first hover. Then on the second hover it works fine with slideDown and slideUp.

      Here is my js...

      
      $(document).ready(function(){
      	$('li.headlink').hover(
      		function() {
      			$('ul', this).stop('true', 'true').slideDown('normal');
      		},
      		function() {
      			$('ul', this).slideUp('fast');
      		});
      });
      

      Any suggestions on how to fix this for FF? Or am I missing something?
      Thanks!

  31. nice... Simple and super effective thanks, man!

  32. ansar

    thanks jason , i had same problem.

  33. Andrew

    Great post, thanks! I recently ran into a problem in IE6/7 that I was able to fix this way.

  34. Striker

    I had an animate on hover for an image which was suffering from the same chaining effect mentioned here if the user moused over multiple times.

    The following stops new events entering the queue until all current events havefinished executing. This works better than stop() as it allows the animation to complete. If the user triggers a new animation to fire and the queue is not empty the function simply returns.
    e.g. call it at the start of your hover function.

    $(".button").hover(function(){

    // drop new animations for this element
    if ($(this).queue("fx").length>0){return}

    //do animations

    });

  35. Michael

    Hi Brandon,

    I have setup a simple hover background fade within a list of links (vertical sub-navigation), I have used jquery.color.js with the example code below:

    var originalBG = $("#nav-sublinks li").css("background-color");
    var fadeColor = "#F4F5FF";
    $("#nav-sublinks li").hover( function () {
    $(this).stop().animate( { backgroundColor:fadeColor}, 750 )
    },
    function () {
    $(this).stop().animate( {backgroundColor:"#E3E4EE"}, 450 )
    }
    );

    It works...but intermittently the hover state will stay on once the mouse has moved to another link. Do you know why this is happening?

  36. Templs

    Thanks a lot for this article!
    I just started looking for solution to prevent animation escalation.
    It's a big surprise for me that solution is so simple :)

  37. it'S official: This is my personla blog post of the month… Thank yu very, very much!

  38. Andrea

    What's the difference between this solution and using queue:false in the animation options?

    Thanks,
    Andrea

  39. Thanks.. this is not just a quick tip but also a really great simple tip :)

  40. cyianite

    great job, I've been saved :)

  41. Sam

    This was exactly what I was looking for. Thanks a bunch.

  42. Helpful article. Thanks!

  43. Daryl

    Thanks so much! This fixed a frustrating problem I was having. I have status messages shown in divs at the top of my page, which are hidden automatically after a certain time period. They also have a button close them prematurely. I was using a dummy animation to show them for a certain amount of time and then I was fading out and removing the divs. The problem was that if I clicked the close button, nothing would happen because it was put in the queue after the dummy animation. Adding stop before the fadeout on the close button click fixed it.
    Thanks!

  44. I tried using this with the build-in animation effects in jQuery UI's .show() and .hide(). It didn't work that well -- if I stop the animation in the middle of a show() or hide() event, the position of the elements get messed up. Subsequent calls to show() animate the item from where it was when I called stop(), as opposed to the correct start point.

  45. as_you_2007

    I notice this problem many times.This article give me a lot of help,thanks a lot!!

  46. Gaz

    Hi - I am trying to implement the stop to prevent the buildup in the following css/jquery menu - can anyone assist in how I can achieve this?
    http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/P10/

    Ideally i'd like to implement the following ideas to improve the menu's usability - any advice would be greatly appreciated.
    1) Implement a .stop() to prevent animation queue buildup. See Brandon Aaron's solution:
    http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

    2) Set a timeout for the menus to stay open for ~1s or so. As it stands, mousing 1 pixel off the bottom will close all layers of the menu, and can be quite frustrating to users.

  47. onlinejobs-sales.com

    hi buddies ,
    iam quite new to this jquery and iam using joomla cms,,,can i install jquery in this joomla

    can anybody help me out please

  48. hi guys ,

    can any body please help me out ,,

    i want to use the jquery effect in joomla ,how can install jquery on joomla cms

    please help me

  49. Ira

    Just wanted to say thanks for this post, from the content and comments I was able to fix my bouncing slideDown/slideUp dropdown navigation issue. The issue was happening if you moused-over the expanding ul too fast and it started firing the hover event repeatedly.

    For the record adding the stop(true,true) to the mouseover and nothing to the mouseout worked like a charm for me:

    
    jQuery(document).ready(function () {
    	jQuery('.nav li').hover(
    		function () { jQuery('ul', this).stop(true, true).slideDown(120); },
    		function () { jQuery('ul', this).slideUp(120); }
    	);
    });
    

    Thanks again.

    • netd1ver

      I have tried two stop()s and also many other solutions on replies,
      but Ira's this way of use only one stop() before slideDown() (or animate) does look best with the delayed callback. Thank you, Brandon & Ira!

      
      $("#nav").find("li").each(function() {
      	var jq = $(this);
      	var dl = jq.find("dl");
      	if (dl.length > 0) {
      		jq.hover(function() {
      			dl.stop(true,true).slideDown("slow");
      		}, function() {
      			dl.delay(250).fadeOut("slow");
      		});
      	}
      });
      
  50. Xavier

    Hi, what if the code looks like this:

    $curobj.hover(
    function(e){
    var $targetul=$(this).children("ul:eq(0)")
    if ($targetul.queue().length<=1) //if 1 or less queued animations
    if (this.istopheader)
    $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
    if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
    $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
    $targetul.slideDown(droplinemenu.animateduration.over)
    },
    function(e){
    var $targetul=$(this).children("ul:eq(0)")
    $targetul.slideUp(droplinemenu.animateduration.out)
    }

    where would you put the stop(). ?

    Been looking everywhere and can't find an answer, and I don't know anything about javascript, I just try to make things work. Any help will be very appreciated. I took the code from here:
    http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/

  51. After running into this problem numerous times I'm glad to finally see a solution. Nice job!

  52. I never quite understood the difference between stop() and stop(true).. the 1st boolean being the one that says "empty queue". but then I guess if the stop() is followed directly by another effect to override it doesn't make a difference in that case...

  53. hunter

    Hi Brandon Aaron.

    Can i using "up" or "down" director to replace "left" ?

    $(document).ready(function() {
    $('ul.anim_queue_example2 a')
    .hover(function() {
    $(this).stop().animate({ up: 20 }, 'fast');
    }, function() {
    $(this).stop().animate({ up: 0 }, 'fast');
    });
    });

  54. Thanks a lot for your post!
    I also ran into that problem. It seems to be present only with certain browsers though (IE...). With a current version of Firefox the animations also work quite well for me without the stop().

  55. Zac

    What if the animate has a callback function? I get weird effects where the animation que is surely halted, however if the animation is halted, it doesnt revert back to its original parameters, but an unfinished animating version.

  56. vol7ron

    Coming close to two years later and still a necessary trick.
    Cory Schires addition to use stop(true,true) also helped immensely.

  57. Sam

    This problem has been bugging me for weeks. Thanks for the quick, concise and accurate fix.

  58. Robalot

    I don't get it? What happened that was undesirable? Both worked exactly the same for me.

    • Parikshit

      Thanks I was facing the same problem and it was helpful. But still the UI is little sluggish and sllowww!! will try to figure out why? But ur code helpmed me a lot and the ui is much better than the previous state; but sill will need to bring the response time one notch up. :-)

  59. what about jQuery.fx.off = true;

    • jQuery.fx.off = true just turns off all animations — or, more precisely, changes the duration of all animations to 0. This post is about how to handle animations in certain cases without completely removing them.

  60. Cristina Avila

    I think I love you :D Thanks, Brandon !

  61. heythanks

    over 2 years later and still helping people. thanks!

    I had a kind of complex rollover where one animation would trigger another with it's callback and a couple other things, and running the mouse over it would screw up the states, sometimes leaving the over state active, or worse, partially active, when mousing out. This, along with taking the second animation that is triggered by the end of the first out of the callback for the mouseout portion, have made it much much better. thanks

  62. Wow - thank you so much! Have spent hours setting flags and adding conditional statements to my animations and tearing my hair out. All fixed now!!!! :D

  63. Ian

    Several years after this post was created it's still helping people. This solved an issue I was having with a rotating banner I created. Had no idea there was even a such thing as animation buildup within jQuery.

    Thanks for writing this article 4 years ago!

  64. Just a quick thanks for posting this tutorial. I was using jquery animation with a hover event just like your example. Using the .stop call was all that was needed to make it work beautifully.

  65. John

    Helpful article but there's a HUGE problem with it.

    Just calling .stop() without arguments will FREEZE the animation.
    For your usage case, that's perfect, because you're animating rollover "sliding" buttons that, when rolled over, begin to animate to move towards the right, and when you remove the mouse it should of course FREEZE at the exact location it was and THEN begin animating towards the neutral position again.

    So, yes your article is PERFECT for ROLLOVERS and other similar cases.

    HOWEVER, let's say you use an onclick event to trigger toggling between a .slideUp()/.slideDown() combo on and element and the user spam-clicks it. Click things enough and the element will end up frozen in some inbetween state between the two animation locations.

    The solution is to read the jQuery documentation: http://api.jquery.com/stop/

    It says that if your GOAL is to ABORT the current animation and animate into some other state, the CORRECT thing to do is to call .stop(true, true) - what this does is that IMMEDIATELY finalizes the ongoing animation by setting all the CSS to their final properties that it had been animating towards (such as a .slideUp()) so that the element is in a known-good-state (fully rolled up)), before you try to apply your slidedown animation.

    So, I repeat, the code above in your example SHOULD be .stop(true, true) for A LOT of cases.

    Please update the article with this caveat because it's a very high-ranked Google result and a lot of people get their information from here.

    Basically, people need to compare .stop() and .stop(true, true) to see what they need for their specific case.

  66. Wow, how simple is that :) Many thanks for this. Was quite annoying watching my effects dance!

  67. Abdul

    Dear Brandon and Gercek,
    Thanks a lot for your quick tip. I was looking for a solution for this problem in my web pages. It solved many of my animation issues.
    Both solutions are working fine for me

40 Pings

  1. [...] The rest is here: Quick Tip: Prevent Animation Queue Buildup » Learning jQuery … [...]

  2. [...] 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 [...]

  3. Quick Tip: Prevent Animation Queue Buildup...

    Thank you for submitting this cool story - Trackback from DotNetShoutout...

  4. [...] 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 [...]

  5. [...] Stoltze has come up with another solution to the problem of animation queue buildup (which Brandon Aaron describes here) in the form of a new plugin, [...]

  6. [...] jQUERY TIPS 69. Prevent Animation Queue Build-up – Through jQuery, this natural queuing of animations is easy to code and user can move on to [...]

  7. [...] - To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation Queue Buildup” at [...]

  8. [...] bu jquery örneği yeterli gelmediyse şu anlatıma bakabilir ve bu siteden jquery ile ilgili birçok kaynağa [...]

  9. [...] bu jquery örneği yeterli gelmediyse şu anlatıma bakabilir ve bu siteden jquery ile ilgili birçok kaynağa [...]

  10. [...] Hört sich nicht schlagend an. Ist es aber. Wer einmal versucht hat hover-Effekte in der Menüführung oder ähnliches mit jQuery zu realisieren, der weiß, wovon ich spreche. Bis dato ist es mir nicht gelungen, das Problem in jQuery angemessen in den Griff zu kriegen, weil ich nicht wirklich kapiert habe, wo das Problem überhaupt liegt.Christian Vogt hat das Problem gelöst, indem er mal richtig nachgelesen hat und wahrscheinlich gewußt hat, wonach zu suchen ist. Animationen-Queue lautet das Stichwort.Infos: Dokumentation: Effects/stop | Animation-Queue in jQuery verhindern | Quick Tip: Prevent Animation Queue Buildup [...]

  11. [...] 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 [...]

  12. [...] Stoltze has come up with another solution to the problem of animation queue buildup (which Brandon Aaron describes here) in the form of a new plugin, [...]

  13. [...] Stoltze has come up with another solution to the problem of animation queue buildup (which Brandon Aaron describes here) in the form of a new plugin, [...]

  14. [...] animation queue just gets in the way. Learn to prevent Animation queue in jQuery with this article. Web Site Share and [...]

  15. [...] jQUERY TIPS 69. Prevent Animation Queue Build-up – Through jQuery, this natural queuing of animations is easy to code and user can move on to [...]

  16. [...] – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation Queue Buildup” at [...]

  17. [...] Take a look at this example from learning jquery [...]

  18. [...] – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation Queue Buildup” at [...]

  19. [...] jQUERY TIPS 69. Prevent Animation Queue Build-up – Through jQuery, this natural queuing of animations is easy to code and user can move on to [...]

  20. [...] menu will remain visible unless we move our mouse arrow away explicitly. That is basically known as queue buildup so we avoid that with stop function there. We then grab the actual dropdown menu to be shown with [...]

  21. [...] menu will remain visible unless we move our mouse arrow away explicitly. That is basically known as queue buildup so we avoid that with stop function there. We then grab the actual dropdown menu to be shown with [...]

  22. [...] jQuery problem. The solution to prevent animation queue buildup is maybe known and documented here. However this dosen’t seems to work if you use two animation functions, where one function is [...]

  23. [...] jQUERY TIPS 69. Prevent Animation Queue Build-up – Through jQuery, this natural queuing of animations is easy to code and user can move on to [...]

  24. [...] 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 [...]

  25. [...] – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation Queue Buildup” at [...]

  26. [...] jQUERY TIPS 69. Prevent Animation Queue Build-up – Through jQuery, this natural queuing of animations is easy to code and user can move on to [...]

  27. [...] 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 [...]

  28. [...] – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation Queue Buildup” [...]

  29. [...] 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 [...]

  30. [...] You’ll notice that I’ve used a stop() function before animating the various elements. This is to prevent queueing of animations, which can cause undesirable results when a user mouse their mouse around before each animation has finished. If you’re interested in finding out more there’s a great article over at Learning jQuery. [...]

  31. [...] Now on to the important part, if you ever run into the issue of jQuery animations that have to complete their mouseover and mouseout events before being able to repeat them. I am currently to lazy to code an example of this. But i will link to an example, and actually the article that helped me solve this issue the first time that I ran into this issue. So here is credit where credit is due Click Here for the Original Article. [...]

  32. [...] two was a snippet of jquery i had not yet learned about. This is the stop() function. Here is a great tutorial on how to implement this [...]

  33. [...] It’s also something that you see done poorly on even the most famous of web sites. This article provides a straight forward example of built up animations and demonstrates how visually jarring [...]

  34. [...] It’s also something that you see done poorly on even the most famous of web sites. This article provides a straight forward example of built up animations and demonstrates how visually jarring [...]

Sorry, but comments for this entry are now closed.