0

jQueryを使用して、特定のdivの上にマウスを置くたびにその高さを拡張して、メニューを作成できるようにしようとしています。しかし、何らかの理由で、マウスを1回だけではなく、マウスに合わせると、常に2回上下します。これがエラーを含む私のコードのコピーです。

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

メニューが2回繰り返されないようにする方法を知りたいのですが、ここにサイトへのリンクがあります。誰かが私を助けてくれることを願っています。

ありがとうございました、

Mo

4

3 に答える 3

1

@Franciscはかなり正しいです。

http://jsfiddle.net/4cVSq/

何が起こっているのか（私は思う）、テキストをマウスオーバーするとdivが展開され、マウスがdivを展開するときに遭遇すると、それが別のホバーとしてカウントされます。

2つのオプションがあります。前にリンクされたもの。またはこれ。

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

外側のdivに高さを指定するか、外側のdivをアニメートしながら、内側のdivにマウスオーバーを置くことができます。メニューにしようと思っているようですので、1つ目は欲しいものだと思います。

于 2012-04-26T22:17:24.717 に答える
1

.stop（）を使用することを忘れないでください。

jQuery：

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

jsFiddleの例。

于 2012-04-26T22:09:35.167 に答える
0

これを試して：

$(document).ready(function() {

            $('#NavExpand3item').hover(
                function () {
                    $(this).animate({
                        "height" : "+=200px"
                    }, "fast");
                },
                function () {
                    $(this).animate({
                         "height" :"-=200px"
                    }, "fast");
                }
            );
          });
于 2012-04-26T22:05:40.747 に答える