javascript - How to solve opacity issue on mouseenter and mouselieave from a menu?

Question

I have a menu on the top of a page, I need an overlay at the background with black color and and opacity = 0.7, this "overlay" has to appear at li:hover (mouseenter) and disappear at mouseleave. This is what I've done so far jsfiddle and this is the fullscreen result

What I got:

1. mousenter works well.
2. mouseleave issue, the overlay appears and disappear everytime the mouse leave (it seems a party flashing div), I know is logic, but what can I do?

If I comment some lines in the code I see what I want but the overlay stays visible.

function iniciarmenu() {
    $(".menu-links ul li").hover(

    function () {
        $(".overlay").animate({
            opacity: 0.7
        }, 'fast');
    },

    function () {
        /*$(".overlay").animate({
            opacity: 0
        }, 'fast');*/
    });
}

I hope you can help me. Thanks!

Answer 1

You need to stop the current animation first.

 $(".overlay").stop( true, true ).animate( { … } );

See: http://api.jquery.com/stop/

You could also use CSS to achieve that effect:

.overlay:hover {
    opacity: .7;
    -webkit-transition: opacity .2s;
       -moz-transition: opacity .2s;
         -o-transition: opacity .2s;
            transition: opacity .2s;
}