I have two problems with my Jquery hover effects.

1. If you mouse in and out really fast(a couple of times) it will stay on the mouse-over effect even though the mouse is no longer inside the containing DIV.

I need something like if(background is visible && mouse not in div element ) then play mouse-out animation. (reset cover logo)

1. Same problem with mouse-in mouse out effect the cover logo sometimes won't bounce back to it's original position, and other times it will. This only happens when you move the cursor really fast.

/

I have two problems with my Jquery hover effects.

1. If you mouse in and out really fast(a couple of times) it will stay on the mouse-over effect even though the mouse is no longer inside the containing DIV.

I need something like if(background is visible && mouse not in div element ) then play mouse-out animation. (reset cover logo)

1. Same problem with mouse-in mouse out effect the cover logo sometimes won't bounce back to it's original position, and other times it will. This only happens when you move the cursor really fast.

http://jsfiddle/e7BLv/13/

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 27, 2012 at 9:52 EdwardEdward 3,09166 gold badges3434 silver badges5353 bronze badges 7

• The Opera 12.02 browser has no issues, which browser you have tested? – Bud Damyanov Commented Sep 27, 2012 at 9:54
• Tried this? $('.home_logo3 li').hover(mouseOverMe3 , mouseOutMe3); – Miha Rekar Commented Sep 27, 2012 at 9:56
• Miha since hover is just a wrapper for mouseenter and mouseleave i doubt this will solve the problem. – Edward Commented Sep 27, 2012 at 10:03
• Are you sure all these effects are for the experience benefit? They're usually a distraction rather than enhancement. It may seem nice and dandy while you develop it but users are usually bothered by this. Change your Javascript functionality to CSS transitions and you won't have any problems related to mouse events and long(er) running functions so pete and overtake eachother on the same thread... – Robert Koritnik Commented Sep 27, 2012 at 10:21
• 1 @RobertKoritnik Yes, I much rather employ css transitions, but IE does not support them unless it's IE 10. Jquery is a more consistent solution, at least for right now. – Edward Commented Sep 27, 2012 at 10:39

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

I've changed JSfiddle to use latest jQuery library, and changed bounce animations to simple fades... And it seems to work as expected.

I suppose your bounce effects (provided by jQuery UI) may be the culprit that prevent correct stopping in some way.

Deferred animations external to mouse event handlers

Use simple transitions if you need to and if possible move animations out of your event handlers with deferred execution so fast hovering will not fire any transition animations. That is likely the best way to ensure that all your mouse events are properly handled and recorded.

It might be a problem with the animation queue. Check the jQuery's stop method. The example in the official documentation will help you http://api.jquery./stop/ .

As the doc suggest, updating to jQuery version to > 1.7 might be required. If you cannot use an updated jQuery version, AND you are changing opacity you must set the opacity to 0 / 1 instead of using fadeIn fadeOut. Ex:

$el.bind('mouseenter',function(){
    $(this).stop().animate({
        opacity: 1
    });
}).bind('mouseleave',function(){
    $(this).stop().animate({
        opacity: 0
    });