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

我真的只是想知道如何防止我的菜单循环两次，这里是一个网站的链接。我希望有人能帮助我。

谢谢你，

莫

Answer 1

不要忘记使用 .stop()。

jQuery：

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

jsFiddle 示例。

Answer 2

@Francisc 非常正确。

http://jsfiddle.net/4cVSq/

发生的事情是（我认为），当您将文本悬停时它会扩展 div，并且当您的鼠标在扩展时遇到 div 时，它会将其视为另一个悬停。

你有两个选择。之前的一个链接。或者这个。

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

您可以给外部 div 一个高度，或者您可以将鼠标悬停在内部 div 上，同时仍然为外部 div 设置动画。我认为第一个是你想要的，因为这看起来像你打算把它做成一个菜单。

Answer 3

尝试这个：

$(document).ready(function() {

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