Question

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

我有一个简单的淡入淡出代码代码。

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

我想让鼠标从菜单移开后菜单淡出。

希望你能理解我是jQuery中真正的noobie。

感谢

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

jQuery FadeTo触发一个div的两个元素

2 个答案: