jQuery动画鼠标悬停/鼠标悬停保持下拉菜单可见答案

【问题标题】：jQuery animate mouseover/mouseout keep drop menu visiblejQuery动画鼠标悬停/鼠标悬停保持下拉菜单可见
【发布时间】：2011-02-06 09:25:43
【问题描述】：

我正在尝试使用动画制作一个基本的下拉菜单，但遇到了一个问题，我似乎无法弄清楚如何在鼠标离开之前保持下拉部分打开。有没有一种简单的方法可以告诉它保持开放？我知道我对 .clickme mouseout 功能的看法是完全错误的，因为它会相应地卸载菜单。

如果有人能在这个特定的情况下提供帮助，我将非常感激。

$(document).ready(function() {

$('.clickme').mouseover(function() {
    $('#slidebox').animate({
        top: '+=160'
    }, 200, 'easeOutQuad');
});

$('.clickme').mouseout(function(){
    $('#slidebox').animate({
        top: '-=160'
    }, 200, 'easeOutQuad')
});

});

【问题讨论】：

标签： jquery jquery-animate mouseover mouseout

【解决方案1】：

这应该让您无需任何标记更改即可：

$('.clickme, #slidebox').hover(function() {
  $('#slidebox').stop().animate({ top: '30px' }, 200, 'easeOutQuad');
}, function() {
  $('#slidebox').stop().animate({ top: '-130px' }, 200, 'easeOutQuad');
});

由于您的元素与父/子无关，因此更容易在菜单上放置绝对位置（无论如何它在 CSS 中都有 130px），因此没有理由不使用它具有绝对位置的事实。试一试，我对您的网站进行了测试，这似乎是我希望在菜单中出现的行为。

【讨论】：

谢谢尼克，我会试一试。
+1 我的解决方案与您的解决方案非常接近，但它有一个烦人的错误...您的解决方案确实很好:)
理想情况下，从长远来看，我是否希望将其更改为父/子场景？
@Ce - 子元素会有所不同......但在这种情况下不一定更容易。如果稍后您有多个向下滑动，那么是的，我会将它们设为子元素。然后，您可以先将其隐藏，然后给它一个 slideToggle() 和相同的缓动效果。
好的。我将对此进行研究，因为我实际创建的菜单上的主导航最终将有 2 次向下滑动。我会为 slideToggle 放弃动画还是将两者结合起来？我会做一些研究... :)

【解决方案2】：

查看 jquery hoverIntent

【讨论】：

实际上，在我发布这个 lol 后，我几乎立即就开始阅读 hoverIntent 的相关内容。谢谢！