A Solution of jQuery Animation Queue Buildup
18 Dec
Posted by Ray Cheung as GPL License, MIT License, Menu
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
- Brushes (11)
- Buttons (21)
- Color Schemes (21)
- Fonts (39)
- Forms (95)
- Icons (84)
- Patterns (24)
- PS Tutorials (9)
- Stock Photos (19)
- Tables (23)
- Announcement (70)
- Best Collections (4)
- Code (44)
- eCommerce (19)
- Framework (156)
- Hosting (12)
- Information (161)
- Inspiration (27)
- Legal Documents (8)
- Reviews (8)
- Security (13)
- Social (19)
- Sound (12)
- Stats (32)
- Tools (191)
- Webmail (13)
- BSD License (51)
- CC License (111)
- GPL License (189)
- LGPL License (37)
- License Free (584)
- MIT License (275)
Search Site
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 2010 WebAppers
Sponsored by NetDNA Content Delivery Network
Recommended Books for Web Developers
This is great! You run into this all the time, and it seems like a great solution. Thanks for sharing.
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!
Finally. i had this a few times. and thought i stupid for not finding a better solution than stop()
@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.
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);
How simple, now I can actually use this without looking like an amateur
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
I’m with ShaggyStyle on that – completely redundant plugin – use stop with parameters!
What happened to animate({***}, {queue:false}); ?
thats a much simpler solution!
Great tutorial. Thanks!
RSS feed for comments on this post · TrackBack URI