WebAppers

/ best free open source web resources /

Shopify

A Solution of jQuery Animation Queue Buildup

Posted · Category: GPL License, Menu, MIT License

The problem of mouseover/-out the menu a couple of times. After you stop moving the mouse, the animation will continue since you’ve built up the animation queue with every mouse event.

Some uses the stop() method to prevent animation queue buildup. While this helps solve the initial problem, it introduces another: When you now do a fast mouseover/-out, you will see no animation at all or just a part of the animation. This behavior seems somehow unnatural.

The HoverFlow Plugin is the solution, which honors a single mouseover/-out with a full animation cycle while preventing animation queue buildup. A queued animation will only run if it corresponds with the current mouse position at “runtime”. That is, 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.

hover-flow

Requirements: jQuery Framework
Demo: http://www.2meter3.de/code/hoverFlow/
License: MIT and GPL License

10 Comments
  • http://dougneiner.com Doug Neiner

    This is great! You run into this all the time, and it seems like a great solution. Thanks for sharing.

  • Daniel Buchner

    HAHA, this is a jQuery bug I always found hilarious. Luckily the MooTools Fx library was smarter and has always provided the ‘link’ option ‘cancel’, it does all the work for you:

    SomeDIV.set(‘tween’, {link:’cancel’}).start(‘width’,100);

    With that simple option set you never need to worry about other animations making your page look amateur!

    MooTools FTW!

  • http://www.siteway.de Paul Albrecht

    Finally. i had this a few times. and thought i stupid for not finding a better solution than stop()

  • http://dougneiner.com Doug Neiner

    @Daniel MooTools `link: ‘cancel’` is the equivalent of jQuery’s stop().animate() chain. The default behavior (`link:’ignore’`) is the MooTools equivalent of this plugin.

  • Daniel Buchner

    Oops, wrong string reference, good call Doug. To add to that, ignore is also the default link option, so you don’t even need to set it :)

    It would look like this in the wild: someDIV.tween(‘width’, 100);

  • http://www.kokathome.eu/ kok aan huis

    How simple, now I can actually use this without looking like an amateur ;-)

  • ShaggyStyle

    I’ve been using stop() with it’s parameters without problems, and I don’t see the need of a plugin to solve this situation. All you have to do is, instead using just stop(), use stop (true, false):

    $(‘.example2 .anim_queue_example a’)
    .hover(function() {
    $(this).stop(false,true).animate({ left: 20 }, ‘fast’);
    }, function() {
    $(this).stop(false,true).animate({ left: 0 }, ‘fast’);
    });

    as indicated at http://docs.jquery.com/Effects/stop:

    stop( [clearQueue], [gotoEnd] )

    so the false won’t clear the queue, and the true will push de queued animation to it’s end. At least this solution seems good enough for me

  • http://criography.com criography

    I’m with ShaggyStyle on that – completely redundant plugin – use stop with parameters!

  • http://pixelmaven.co.nz pixelmaven

    What happened to animate({***}, {queue:false}); ?

    thats a much simpler solution!

  • http://www.buildvoy.com/ builder

    Great tutorial. Thanks!

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons