在悬停时使用 jQuery .animate 显示新的 div答案

【问题标题】：Using jQuery .animate on hover to display new div在悬停时使用 jQuery .animate 显示新的 div
【发布时间】：2013-09-15 15:32:35
【问题描述】：

该功能正常工作，但是在我单击任何链接之前，右侧的 div 消失了。我应该加入一个鼠标事件来让它几乎像横向下拉菜单一样工作吗？

$(".design").hover(function () {
$(".design-nav").animate({opacity: "1"}, {queue: false});
}, function () {
$(".design-nav").animate({opacity: "0"}, {queue: false});
});

<div class="design"></div>
<div class="design-nav">
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
</div>

或在此处查看工作演示 - http://jsfiddle.net/conordaltonlive/jfLNh/3/

【问题讨论】：

不，只需添加一个超时，以便设计上的 mouseleave 将在 10 毫秒后隐藏 design-nav div，如果将 design-nav div 悬停在上方，则清除该超时，使其不会隐藏。

标签： javascript jquery function hover jquery-animate

【解决方案1】：

试试这个：

$(".design,.design-nav").hover(function () {
    $(".design-nav").animate({
        opacity: "1"
    }, {
        queue: false
    });
}, function () {
    $(".design-nav").animate({
        opacity: "0"
    }, {
        queue: false
    });
});

并且还要更改您的.design-nav css opacity:0

Fiddle Here

【讨论】：

谢谢，这正是我想要的！
@conordaltonlive 如果解决了您的问题，请将其标记为答案

【解决方案2】：

工作DEMO

试试这个

将您的 div 包裹在另一个里面，这里是 <div id="container"> 并在其上应用悬停，所以它可以工作，否则如果您离开悬停 div，可见的 div 将隐藏。

html

<div id="container">    // added div
<div class="design"></div>
<div class="design-nav">
    <div><li href="#">link</li></div>
    <div><li href="#">link</li></div>
    <div><li href="#">link</li></div>
</div>
</div>

代码

$("#container").hover(function () { // changed selector '.design' to '#container'
    $(".design-nav").animate({
        opacity: "1"
    }, {
        queue: false
    });
}, function () {
    $(".design-nav").animate({
        opacity: "0"
    }, {
        queue: false
    });
});

并更改 opacity: 0;of class .design-nav 以便在页面加载时隐藏它

希望对你有帮助，谢谢

【讨论】：