Question

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

如果您以“正常”速度将光标移到菜单上，这样可以正常工作。我遇到的问题是如果你不正确地将光标移到菜单上，菜单的行为。它使以前悬停的元素显示为静止，我必须将它们悬停在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>

有什么想法吗？

Answer 1

请参阅此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

Answer 2

这是一个解决方案：

使用变量，并在动画完成后设置它。例如：

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（）移动鼠标时，可以停止动画。

菜单和子菜单在不规律地悬停时表现不正常

2 个答案: