JQuery - 在悬停在不同的 div 上时保持 div 处于动画状态？答案

【问题标题】：JQuery - keep a div in animated state whilst hovering over a different div?JQuery - 在悬停在不同的 div 上时保持 div 处于动画状态？
【发布时间】：2011-05-09 19:34:26
【问题描述】：

我正在像往常一样尝试一些超出我能力范围的东西！我正在尝试为我的新网站制作导航，当用户将鼠标悬停在另一个 div 上时，它应该会向下滑动。另一个 div 将具有某种图形，上面写着“菜单”。将鼠标悬停在“其他”div 或菜单 div 本身上时，我需要导航以保持打开状态。到目前为止，我已经让它工作了，但是在一个 div 上，菜单在里面，这不是正确的事情。

有没有办法将这两个 div 绑定在一起或类似的东西？希望我在 JQuery 方面做得更好！

My site is here if you would like to take a peek。白色 div 代表用户将鼠标悬停在其上以打开菜单的 div。

欢迎任何帮助，谢谢：D

【问题讨论】：

一分钟我为你做个小提琴
+1 用于在问题中使用“whilst”。

标签： jquery html jquery-animate bind

【解决方案1】：

这是一个有效的小提琴：http://jsfiddle.net/maniator/dpBBp/

这里是更新的js：

$('.menu_button').hover(function() {
    $('#nav').slideDown();
}, function() {
    $('#nav').slideUp();
})

在小提琴中查看 html。

【讨论】：

谢谢尼尔，看看。喜欢随机的猫图片！
@Dan 如果这是您正在寻找的答案，或者如果另一个是，请记住选择一个作为accepted
@pixelbobby thnx ^_^ upvotes 今天对我来说意义不大，哈哈。我在极限。现在我想要的是一些公认的答案：-p
别担心我不会忘记的。我现在正在更改代码。托管正在发挥作用，这无济于事......
@pixelbobby 哈哈，直到我在另一个 Q 上发表评论，我才看到这条评论哈哈

【解决方案2】：

包含一个 div 中的所有元素并定位该 div。像这样的：

<ul>
    <li>
        <a href='#'>Nav Item</a>
        <div style='display:none;'>
            <ul>
                <li>Sub nav 1</li>
            </ul>
        </div>

    </li>

</ul>

<script>
$("ul > li").hover(function(){
    //on roll over
}, function(){
    //on roll out
});
</script>

在您的网站上附带说明您应该使用精灵作为背景图像并在悬停时切换背景位置，当您滚动元素时它将摆脱跳跃。

【讨论】：

是的，这在待办事项清单上。我需要并排重新剪切我的背景图像，以便在悬停时没有加载时间。我只是懒惰：P