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