18 Dec

A Solution of jQuery Animation Queue Buildup

GPL License, MIT License, Menu

Leave a Comment

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.

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

Sponsors

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!

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact