Mouseout and Mouseenter jquery function

Question

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?

Answer 1

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 });
});

Answer 2

The problem originaly is not mouseout or mouseover events. They are working as they should to work. It means even if you mouse over the element for just 1ms it will work.

Solution for this problem is delaying the action. You should wait a certain amount of miliseconds to do what you want happens.

You can do it manually or you can just use jQuery hover intent plug in that implemented this very nice and easy to use.

It's better to not use mouseout or mouseover event and use jQuery .hover() (if you are using the plug in .hoverIntent() for more clean and readable code.

Answer 3

.mouseover() and .mouseout() give strange results because mouseover() fires more than once while your mouse is still inside the element. Simple mouse movement will trigger it again & again.

.mouseenter() and .mouseleave() are better because they are only supposed to fire one time upon entering or leaving the element. However, they still do not seem to function as well as .hover() which combines them together into one method.

Also adding a .stop() will stop the current animation before starting a new one. .stop(true, false) will clear anything in the animation queue and not allow the current animation to complete.

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

http://api.jquery.com/hover/

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

Answer 4

set some variable as mutex, like:

var isActive = false;
('.hover').css('opacity', 1);
    $('.controlNav li').mouseover(function() {
        if(isActive) return false;
        isActivce = true;
        $('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1, complete: function(){isActive = false} }, 450, 'swing' );
    }).mouseout(function(){
        $('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
    });