第二次使用jQuery導航菜單mouseover和mouseout不起作用

Question

我正在用jQuery開發一個導航菜單。我來到了可以滑下第一個子菜單並向右滑動第二個子菜單的步驟。當我mouseout它會淡出。但問題是當我第二次完成鼠標移動時。它不會工作。第一次懸停它工作正常。我無法識別問題。我認爲鼠標移出功能在執行後不會停止或完全恢復。誰能給我一個建議，這個問題

我的jQuery代碼

<script type="text/javascript"> 
     $(document).ready(function() { 
      jQuery('.box1').mouseover(function() { 
      ///$(".box2").stop().slideDown('slow'); 
       $('.box2').stop().animate({ 
        height: 50 
       }, 1000); 
      }); 

      jQuery('.box1').mouseout(function() { 
       $('.box2').stop().fadeOut(); 
       // $(".box2").stop().slideUp('slow'); 
      }); 

       jQuery('.box4').mouseover(function() { 
       // $(".box3").stop().slideDown('slow'); 
       //$(".box3").show('slide', {direction: 'left'}, 800); 

       $('.box3').stop().animate({ 
        width: 200 
        }, 1000); 
      }); 

      jQuery('.box4').mouseout(function() { 
       //$(".box3").stop().slideUp('slow'); 
       // $(".box3").hide('slide', {direction: 'left'}, 800); 
       $('.box3').stop().fadeOut(); 
      }); 
      }); 
</script> 

我的HTML代碼

<ul > 
    <li class="box1" > 
    <div class="box_sub" >Home</div> 
    <ul> 
     <li style="float:left;" class="box4" > 
     <div id="box2" class="box2" style="float:left">Sub 1.0</div> 
     <ul style="float:left;"> 
      <li id="box3" class="box3" style="float:left;clear:none;" > Sub Sub 1.1</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

我的CSS代碼

.box_sub { 
     width: 200px; 
     height: 50px; 
     background-color: #0066CC; 
     color: #FFF; 
     text-align: center; 
     line-height: 50px; 
     font: Verdana, Geneva, sans-serif; 
     font-size: 14px; 
     padding-top: 20px; 
     padding-bottom: 20px; 
     cursor: pointer; 
    } 
    .box2 { 
     width: 200px; 
     height: 0px; 
     background-color: #0066CC; 
     color: #FFF; 
     text-align: center; 
     line-height: 50px; 
     font: Verdana, Geneva, sans-serif; 
     font-size: 14px; 
     cursor: pointer; 
    } 
    .box3 { 
     width: 0px; 
     height: 50px; 
     background-color: #0066CC; 
     color: #FFF; 
     text-align: center; 
     line-height: 50px; 
     font: Verdana, Geneva, sans-serif; 
     font-size: 14px; 
     padding-top: 20px; 
     padding-bottom: 20px; 
     cursor: pointer; 
    } 
    .box1 { 
     min-width: 200px; 
    } 
    ul { 
     list-style: none; 
    } 
    ul { 
     margin: 0; 
     padding: 0; 
    } 
    li { 
     margin: 0; 
     padding: 0; 
    } 

My jsFiddle link is here..

Answer 1

太多的代碼，你想要的東西

Try This Working Fiddle

$("#nav li").hover(
    function(){ 
     $(this).children('ul').hide(); 
     $(this).children('ul').slideDown('slow'); 
    }, 
    function() { 
     $('ul', this).slideUp('slow');    
    }); 

Answer 2

您的問題如下：

您的方塊以高度/寬度爲0開始。 然後，通過將其高度/寬度更改爲您希望的值來顯示它們。 之後，您將使用jQuery函數fadeOut，它不會更改高度或寬度。 然後，重新調整高度/寬度，但實際上，因爲您已經第一次完成了任何操作，所以您不會更改任何內容，但是您不會從jQuery中刪除fadeOut。

所以，我認爲你有兩個解決方案：

• 首先一個，你改變你的出現，因此它可以與fadeOut功能，同時修改不透明和顯示CSS屬性（改變不透明度爲1，並顯示相匹配的方式到無）
• 第二個，你改變你的消失方式，所以你刪除fadeOut，而是使用自定義動畫功能，您將設置更改爲原來的設置。