jquery - 触发一个div的两个元素上的jQuery FadeTo

Question

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

我有一个褪色菜单的简单代码。

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

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

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

谢谢

Answer 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/

Answer 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();
});