jQuery Animations

I probably should have found this earlier, but I just saw a great example of jQuery animation and I looked into their source code. One of the problems that I've seen with using animations is that the elements that are being animated like to finish what they're doing before taking on another animation. For instance, if you wanted to fade something in and then out again, the element wants to fade completely in before fading out. Sometimes you don't actually want this to happen because the user has already moved on and doesn't want the focus to be on that element any more.

Check out the fading animation on this site: http://agamicreative.com/

I looked into their site to find super clean and simple code:

$(document).ready(function(){  
  $("#nav3 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "8"}, "fast");
  }, function() {
    $(this).next("em").animate({opacity: "hide", top: "8"}, "fast");
  });
});

The .stop() function is actually what caught my attention the most. I have to say, I've been looking for an answer like this for a little while now, and once again jQuery makes it super easy without me even knowing it.