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.