CODEWITHSUNDEEP
javascriptjqueryhtml
Edward
Edward

Reputation: 3081

Jquery hover problems when moving cursor 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.net/e7BLv/13/

Upvotes: 4

Views: 4173

Answers (2)

Robert Koritnik
Robert Koritnik

Reputation: 105029

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.

Upvotes: 4

Jesus Monzon Legido
Jesus Monzon Legido

Reputation: 1313

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.com/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
    });

Upvotes: 1

Related Questions