0

我有一个水平菜单（设置为列表），当您将鼠标悬停在其中一个列表项上时，它会为作为列表项子项的下拉菜单设置动画。

如果您以“正常”速度将光标移动到菜单上，这将正常工作。如果您不规律地将光标移到菜单上，我遇到的问题是菜单的行为。它使先前悬停的元素仍然显示，我必须将鼠标悬停在 dropMenu 上方和上方，直到它们全部返回到初始状态（高度：0）。

我的菜单 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 回答