jQuery FadeTo on two elements triggering one div

I have probably simple question: /the code: http://jsfiddle.net/FZufj/8/ /

I have a simple code for a fading menu.

I want开发者_开发知识库 the menu to fade after mouse over on both the menu and the 'menu button' That isn't hard but I have no idea how to disable the fade effect when mouse moves from menu to menu button

I want the menu to fadeout after mouse is moved from menu.

Hope You can understand I am real noobie in jQuery.

thanks

you should use the .stop(true,false) to stop the current animation.

Here's a working version of the code. (removed the double code by using 1 selector to select both the .menu and the .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
    });
});

I've also updated your example here: http://jsfiddle.net/FZufj/19/

Demo: http://jsfiddle.net/wdm954/FZufj/20/

I think you're going about this the wrong way. If you group your menu button and menu options into the same element, the hover will apply to both. Here is use a span for the button and a nested ul for the dropdown menu.

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

The hover is applied to the wrapping list item, and inherited by the child elements.

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