Question

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

Answer 1

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/