CODEWITHSUNDEEP
jquery
Shahrzad Parvizi
Shahrzad Parvizi

Reputation: 19

Fade the slideDownMenu on the mouseout using jQuery

$("#slideDownDiv").mouseout(function () {
    $(this).animate({
        opacity:"0"
    });
    $(this).css({
        display: "none",
    })
});

I have a div named slideDown which fadeIn a div named slideDownDiv on the mouseover.

The slideDownDiv contains 2 other divs, div a and div b.

div a and div b each contains an ul.

Now I want to fadeout the "slideDownDiv" on the mouseout. But the "slideDownDiv" fades-out when my mouse is somewhere in the middle of the div "the cursor hasn't gone out of the div yet".

Anyone here can tell me why?

Is it because of slideDownDiv children??

How can I fix it?

Upvotes: 0

Views: 43

Answers (1)

EdenSource
EdenSource

Reputation: 3387

You are using mouseout event handler, and it should be mouseleave :

$('#slideDown').on('mouseover', function () {
    $('#slideDownDiv').stop( true, true ).fadeIn();
})

$('#slideDownDiv').on('mouseleave', function () {
    $(this).stop( true, true ).fadeOut();
});

Demo

Here is the difference between mouseout() and mouseleave()

Upvotes: 3

Related Questions