Repeating animations - how to stop them.

Repeating animations - how to stop them.

Hi all.

I have applied the fadeIn() and fadeOut() effects to a li>ul in my html, but if the user leaves the ul briefly then re-enters it before it has finished fading out, the ul fades back in again.  This can happen many times over by accident and it's very annoying.

If the user leaves the ul I want it to fadeOut() and NOT fadeIn() again until the user re-enters the parent li element.

Is there a way of ensuring this?  I have done a quick search for while and if/then/else functions but haven't been getting anywhere.  This is what I have, very simple indeed:

  1. $(document).ready(function() {
  2.  $(".nav ul").hide(); 
  3.  $(".nav li.conductor").hover(function() {
  4.    $(".nav ul").fadeIn(200);
  5.    },function(){
  6.    $(".nav ul").fadeOut(800);
  7.   });
  8.  });
What should I add/change in the above to make it more robust in terms of user experience?

Thank you!