触发一个div的两个元素上的jQuery FadeTo答案

【问题标题】：jQuery FadeTo on two elements triggering one div触发一个div的两个元素上的jQuery FadeTo
【发布时间】：2011-06-09 02:39:10
【问题描述】：

我可能有一个简单的问题：/代码：http://jsfiddle.net/FZufj/8/ /

我有一个渐变菜单的简单代码。

我希望在鼠标悬停在菜单和“菜单按钮”上后菜单淡出这并不难，但我不知道如何在鼠标从菜单移动到菜单按钮时禁用淡入淡出效果

我希望在鼠标从菜单中移动后菜单淡出。

希望你能理解我是 jQuery 的真正菜鸟。

谢谢

【问题讨论】：

应该在

【解决方案1】：

你应该使用 .stop(true,false) 来停止当前动画。

这是代码的工作版本。（通过使用 1 选择器同时选择 .menu 和 .button 来删除双码

$(document).ready(function() { // This sets the opacity of the thumbs to fade down to 60% when the page loads
    $(".menu").fadeTo(600, 0.01);

    $(".menu, .button").hover(function() {
        $(".menu").stop(true,false).fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
    },  function() {
        $(".menu").stop(true,false).fadeTo("slow", 0.01); // This sets the opacity back to 60% on mouseout
    });
});

我还在这里更新了您的示例：http://jsfiddle.net/FZufj/19/

【讨论】：

虽然这种方法效果更好，但它更像是一种快速修复而不是长期解决方案。原始 HTML 标记是问题的一部分。

【解决方案2】：

演示：http://jsfiddle.net/wdm954/FZufj/20/

我认为你的做法是错误的。如果您将菜单按钮和菜单选项分组到同一个元素中，则悬停将适用于两者。这里使用span 作为按钮，使用嵌套ul 作为下拉菜单。

<div class="topbar">
    <ul class="menu">
        <li>
            <span>Option 1</span>
            <ul class="sub">
                <li>Sub Menu 1</li>
                <li>Sub Menu 2</li>
                <li>Sub Menu 3</li>
            </ul>
        </li>
    </ul>
</div>

悬停应用于包装列表项，并由子元素继承。

$('.menu > li').hover(function() {
    $(this).children('.sub').fadeIn();
}, function() {
    $(this).children('.sub').fadeOut();
});

【讨论】：

感谢您的努力，但我想要一个隐藏的菜单，在鼠标悬停后不仅在菜单按钮上而且在菜单显示的区域上都可见。它适用于非常苦行的网站。当 soeon 想要 t 点鼠标 t 菜单时，它甚至会在到达菜单按钮之前显示。现在我对 vdcruijsen 的回答感到 100% 满意
@Piotr 我更改了几行：jsfiddle.net/wdm954/FZufj/22 - 有趣的设计理念。祝你好运！