jQuery Animation Queue Buildup Troubles

Posted by on Oct 8, 2009 in Blog, Web Development | One Comment
jQuery Animation Queue Buildup Troubles

Lately I run into a annoying 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 triggering the next on callback. In my case it was a menu box with a titlebar and a body area. On hover the title bar fades in (function1:  show(300) ), then the bodyarea rolls down (function2 on callback from function1: rollDown(300) ).  Now if you hover over and out quickly, it seems that jQuery “remembers” the last stat of the animation. So in the whorst case, the body area is 1px in height and stays in that size. The workaround after five hours of trial and error with different combinations of stop(tru, false) – stop (false, true) was to use not the premade functions like show(), rollDown() etc.  It seems that the stop() function is working different on the animate() function.  So I used this and manual created the needed animations.

Download the full example with everything here

Checkout the finished js code:

Used jQuery Version: 1.3.2

1 Comment

  1. THEtheChad Elliott
    13. October 2011

    I ran into the same problem, Andrea ( as I’m sure everyone has ). You’d think that jQuery would solve this issue out of the box, but, alas, it doesn’t.

    I wanted to share my solution with you.

    The code I use looks like this:

    $(“.infobox_wrapper img”).hover(
    function() {
    $this = $(this);
    $this.nextAll(“h2″).not(“:animated”).animate({ opacity: “1″ }, 300, function() {
    $this.nextAll(“.infobox_text”).not(“:animated”).animate({ height: “220″, opacity: “1″ }, 300);
    });
    },
    function() {
    $this = $(this);
    $next_info = $this.nextAll(“.infobox_text”);
    $prev_h2 = $this.prevAll(“h2″);
    $next_info.animate({ height: “0″, opacity: “0″ }, 300, function() {
    $next_info.clearQueue();
    $prev_h2.animate({ opacity: “0″ }, 300, function(){
    $prev_h2.clearQueue();
    });
    });
    });
    });

    Essentially, it checks if something is already animated before queuing the start animation and completely clears the queue once the end animation is finished. The reason we have to clear the queue is because more than one end animation can build up.

    I like this method better than stop because it lets the entire animation run. Stop halts things mid animation and makes for a choppy experience.

Leave a Reply