jquery：追加div導致mouseover/mouseout循環

Question

我有一個ul，我用於導航菜單。當用戶將鼠標移動到子li上時，我會向li添加「nav-about」類（或nav - 無論類爲哪個li）的div，並滑動附加的div。我遇到了一個問題，我的代碼被捕獲到一個循環中，並且li的mouseover/mouseout會來回切換，直到我將鼠標移出li。感謝您的幫助。

HTML

<div id="nav" class="nav"> 
    <ul id="header-menu" class="mainnav "> 
     <li class="about"> 
      <a class="" id="about" href="http://www.example.com/projects/joanroot/about/">About</a> 
     </li> 
     <li class="paintings"> 
      <a class="" id="paintings" href="http://www.example.com/projects/joanroot/paintings/">Paintings</a> 
     </li> 
     <li class="worksonpaper"> 
      <a class="" id="worksonpaper" href="http://www.example.com/projects/joanroot/works-on-paper/">Works On Paper</a> 
     </li> 
     <li class="lectureseries"> 
      <a class="" id="lectureseries" href="http://www.example.com/projects/joanroot/lecture-series/">Lecture Series</a> 
     </li> 
     <li class="contact"> 
      <a class="" id="contact" href="http://www.example.com/projects/joanroot/contact/">Contact</a> 
     </li> 
    </ul> 
</div> 

CSS

div#nav { 
    overflow: hidden; 
} 
.mainnav, #nav > ul { 
    background: url("http://www.example.com/projects/joanroot/images/main-menu.gif") no-repeat scroll 0 0 transparent; 
    float: left; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    width: 973px; 
} 
#nav > ul > li { 
    display: inline; 
} 
#nav > ul > li > a { 
    display: block; 
    float: left; 
    height: 54px; 
    overflow: hidden; 
    text-indent: -9999px; 
    z-index: 100; 
} 
#nav ul li a#about { 
    width: 154px; 
} 
div.nav-about { 
    background: url("http://www.example.com/projects/joanroot/images/main-menu.gif") no-repeat scroll 0 -55px transparent; 
    height: 54px; 
    overflow: hidden; 
    position: absolute; 
    width: 154px; 
} 

jQuery的

InitilizeMenu('#header-menu',400,'slide','slide'); 

function InitilizeMenu(parent,moveSpeed,inStyle,outStyle) { 
    $(parent).children('li').each(function() { 
     var thisClass = $(this).attr('class'); 
     AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle); 
    }); 
} 

function AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle) { 
    $(parent+' .'+thisClass).mouseover(function() { 
     $(this).append('<div class="nav-'+thisClass+'"></div>') 
     switch(inStyle) { 
      case 'slide': 
       $('div.nav-'+thisClass).css({display:'none'}).slideDown(moveSpeed); 
       break; 
      case 'fade': 
       $('div.nav-'+thisClass).css({display:'none'}).fadeIn(moveSpeed); 
       break; 
      case 'none': 
       $('div.nav-'+thisClass); 
       break; 
      default: 
       $('div.nav-'+thisClass); 
       break; 
     } 
    }).mouseout(function(){ 
     switch(outStyle) { 
      case 'slide': 
       $('div.nav-'+thisClass).slideUp(moveSpeed,function(){ 
        $(this).remove(); 
       }); 
       break; 
      case 'fade': 
       $('div.nav-'+thisClass).fadeOut(moveSpeed,function(){ 
        $(this).remove(); 
       }); 
       break; 
      case 'none': 
       $('div.nav-'+thisClass).remove(); 
       break; 
      default: 
       $('div.nav-'+thisClass).remove(); 
       break; 
     } 
    }); 
} 

Answer 1

爲什麼不使用.hover()代替：

function AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle) { 
    $(parent+' .'+thisClass).hover(function() { 
     $(this).append('<div class="nav-'+thisClass+'"></div>') 
     switch(inStyle) { 
      case 'slide': 
       $('div.nav-'+thisClass).css({display:'none'}).slideDown(moveSpeed); 
       break; 
      case 'fade': 
       $('div.nav-'+thisClass).css({display:'none'}).fadeIn(moveSpeed); 
       break; 
      case 'none': 
       $('div.nav-'+thisClass); 
       break; 
      default: 
       $('div.nav-'+thisClass); 
       break; 
     } 
    }, function() { 
     switch(outStyle) { 
      case 'slide': 
       $('div.nav-'+thisClass).slideUp(moveSpeed,function(){ 
        $(this).remove(); 
       }); 
       break; 
      case 'fade': 
       $('div.nav-'+thisClass).fadeOut(moveSpeed,function(){ 
        $(this).remove(); 
       }); 
       break; 
      case 'none': 
       $('div.nav-'+thisClass).remove(); 
       break; 
      default: 
       $('div.nav-'+thisClass).remove(); 
       break; 
     } 
    }); 
}