I threw together my own piece of basic jQuery code to have a fadeIn and a fadeOut when I'm hovering a list item, this all works wonderfully apart from one small detail.

When I rapidly move over the list item a couple of times in a row, the events start queueing up and the fades keep happening until the queue is done.

How do I prevent this from happening?

I tried adding a "stop" to a "mouseout" event, but that breaks the setup and nothing fades in when hovering.


HTML Code:
<script type="text/javascript">
	$(document).ready(function(){
		$('li.headlink').hover(function(){
			$('ul', this).fadeIn("slow");
		}, function(){
			$('ul', this).fadeOut("slow");
		});
	});
</script>

Additionally, it would be neat to have the fadeIn stop when the mouse moves out of the list item before the animation is done, and then go straight through a fadeOut from where the fadeIn stopped (so if the fadeIn was at 60% or so, the fadeOut kicks in and starts from 60% to 0%, instead of 100% to 0%). But this isn't important, just a nice extra feature.

Thans in advance.