Jquery Question and Answers. Get the latest News and Jquery Techniques

I’m creating a drop down nav menu. I want the height to animate down which I have accomplished with a simple JQuery function

$(‘li.brands’).hover(
function(){ $(‘ul’, this).animate({‘height’:’100px’});
$(‘header’).animate({‘height’:'+=100px’});},
function(){$(‘ul’, this).animate({‘height’:’0′});
$(‘header’).animate({‘height’:'-=100px’});}
);

But the problem is when you roll over it multiple times quickly it plays the entire animation over and over. How can I set it so it will start/stop the animation based on how long the person rolls over the link.

Say I want the animation to play for one second, but then someone rolls over the link then rolls off I want to stop the animation before it finishes instead of playing the entire thing.

Any help is appreciated! If further explanation is needed I will edit the post and add more.