jQuery下拉菜單重新加載

Question

我正在嘗試使用jQuery使某個特定div的高度隨鼠標懸停在其上方而展開，以便我可以製作一個菜單。但由於某種原因，它總是會循環上下兩次，因爲我的鼠標懸停在它上面，而不是隻是我想要的那一次。這裏是我的代碼包含錯誤的副本。

<div id="Container"> 
     <div id="Headeritem"> 
      <div id="NavBaritem"> 
       <div id="Nav3item"> 
       <div id="NavExpand3item"><a href="#" class="NavTextitem">Ministries</a></div> 
       </div> 
      </div> 
      </div> 
     <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
     <script type="text/javascript"> 
      <!--Script for NavBar Control 
      $(document).ready(function(e) { 
      <!--Script for AboutNE DropDown//--> 
      $('#NavExpand3item').hover(
       function() { 
        $('#NavExpand3item').animate({ 
         'height':'200px' 
        }, 300); 
       }, 
       function() { 
        $('#NavExpand3item').animate({ 
         'height':'0px' 
        }, 300); 
       } 
      ); 
      }); 

      //--> 
     </script> 
    </div> 

我真的只是想知道我怎麼能阻止我從自行車菜單兩次，這裏是一個site的鏈接。我希望有人能夠幫助我。

謝謝你，

莫

Answer 1

@Francisc是非常正確的。

http://jsfiddle.net/4cVSq/

發生了什麼事是（我認爲），當你mousover它擴展股利，當你的鼠標遇到DIV，因爲它擴大了文本，它計算的是作爲另一個懸停。

您有兩種選擇。一個鏈接before。或這一個。

http://jsfiddle.net/4cVSq/2/

你可以給外層的div的高度，或者你可以把鼠標懸停內格，同時仍然動畫的外層div。我認爲第一個就是你想要的，因爲這看起來就像你打算把它製作成一個菜單。

Answer 2

試試這個：

$(document).ready(function() { 

      $('#NavExpand3item').hover(
       function() { 
        $(this).animate({ 
         "height" : "+=200px" 
        }, "fast"); 
       }, 
       function() { 
        $(this).animate({ 
         "height" :"-=200px" 
        }, "fast"); 
       } 
      ); 
      }); 

Answer 3

不要忘記使用.stop（）。

的jQuery：

var origHeight = $('#NavExpand3item').height(); 
$('#NavExpand3item').hover(
function() { 
    $(this).stop().animate({ 
     'height': '200px' 
    }, 300); 
}, function() { 
    $(this).stop().animate({ 
     'height': origHeight 
    }, 300); 
});​ 

jsFiddle example。