Coding Tip: jQuery Animation Queuing

by Paul Robinson on 02.25.2010 | no comments

In this first coding tip we are going to look at a small, but very helpful tip for those starting out with jQuery animation. Who knows maybe even some of those who are familiar with jQuery have missed it.

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:

$(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.