0

水平メニュー（リストとして設定）があり、リスト項目の1つにカーソルを合わせると、リスト項目の子であるドロップメニューがアニメーション化されます。

メニュー上でカーソルを「通常の」速度で移動すると、これは正常に機能します。私が抱えている問題は、カーソルをメニュー上に不規則に移動した場合のメニューの動作です。以前にホバーした要素が表示されたままになり、すべての要素が初期状態 (高さ:0) に戻るまで、dropMenu の上に移動してドロップ メニューから出る必要があります。

メニューの私のjqueryは以下の通りです：

$('#templateNav > ul > li').bind({
        mouseenter: function() {
            $(this).find(".dropMenu").clearQueue().animate({
                height: 250
            }, 200);
        },

        mouseleave: function() {
            $(this).find(".dropMenu").clearQueue().height(0);
        }
    });

そして、これが私のメニューコードの例です:

<div id='templateNav'>
    <ul>
        <li>Menu 1<span class='dropMenu'>...</span></li>
        <li>Menu 2<span class='dropMenu'>...</span></li>
        <li>Menu 3<span class='dropMenu'>...</span></li>
    </ul>
</div>

何か案は？

4

2 に答える 2

2

こちらをご覧くださいhttp://jsbin.com/ukuqik/1

$('#templateNav > ul > li').bind({
    mouseenter: function() {
        $(this).find(".dropMenu").stop(true,true).animate({
            height: 250
        }, 200);
    },

    mouseleave: function() {
        $(this).find(".dropMenu").stop(true,true).animate({
            height: 0
        }, 200);
    }
});

そしてもう少し良い： http： //jsbin.com/ukuqik/6

于 2013-02-04T12:29:09.653 に答える
0

ここに解決策があります：

変数を使用し、アニメーションが完了したときに設定します。次のようなもの:

var isAnimating = false;
mouseenter: function() {
  isAnimating = true; // Here we start
  $(this).find(".dropMenu").clearQueue().animate({
       height: 250
  }, 200, function (){isAnimating=false}); // Now we are done with animation
},
mouseleave: function() {
  if(isAnimating == false) $(this).find(".dropMenu").clearQueue().height(0);
}

または、.stop() を使用してマウスを移動したときにアニメーションを停止することもできます。

于 2013-02-04T12:25:35.980 に答える