Search code examples
javascriptjquerymouseovermouseout

Mouseout and Mouseenter jquery function

I used the jQuery mouseout and mouseenter function. But is not working good. Because when you go fast over the items. I get verry crazy effects. I used this code:

$('.hover').css('opacity', 1);
    $('.controlNav li').mouseover(function() {
        $('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1 }, 450, 'swing' );
    }).mouseout(function(){
        $('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
    });

How can i fix my problem?

Solution

  • I added in .stop() just before the animation which will stop the animation in place and should stop the jumping.

    $('.controlNav li').mouseover(function() {
    $('.hover', this).css({ display: 'block' }).stop().animate({ top: -73, opacity: 1 }, 450, 'swing' );
}).mouseout(function(){
    $('.hover', this).css({ display: 'none' }).stop().animate({ top: -60, opacity: 0 });
});