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

Posted 2023-05-08

【中文标题】在悬停时使用 jQuery .animate 显示新的 div

【英文标题】：Using jQuery .animate on hover to display new 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 悬停在上方，则清除该超时，使其不会隐藏。

【参考方案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 以便在页面加载时隐藏它

希望对你有帮助，谢谢