Coding Tip: jQuery Animation Queuing
Animating with javascript is something that most web developers have ran into at one point or another. jQuery makes animating very easy by giving us access to the famous animate function. Something that most people overlook is the power of animation/fx queues. A common problem is this:
If you quickly hover in and out of the div above you will notice a problem where the animation queues up & completes the entire queue. Most of the time you will want the animation to respond quickly to your hovers & jump straight into the next animation. You can do this by changing you code to this:
|
1 2 3 4 5 6 7 |
$(function($) { $('#animated-div').hover(function() { $(this).animate({opacity:0.4}, {queue:false, duration:500}); }, function() { $(this).animate({opacity:1}, {queue:false, duration:500}); }); }); |
Here is the example with the code changed.
I hope this tip helps you with your adventures into animating with jQuery.
2 Comments
Keshav Naidu
This thing we can do in CSS also, then why JS ?
any reason ?
Thanks.
Paul Robinson
Again. Not sure I follow. This post was wrote/published in 2010 when CSS based animations were in no way usable in the mainstream due to the complete lack of Internet Explorer support..
Even now you would need to use JS fallbacks for IE as only IE 10 has full support for CSS animations (according to CanIUse.com).