CODEWITHSUNDEEP
jqueryhover
fiberOptics
fiberOptics

Reputation: 7165

How to fix continuous animation in jquery hover

If you try to hover-in and hover-out on a green box, 5 times or more in a second, you will see that the box is bouncing like a ball. What I want to happen is that, when the green box goes back to its original size (50px) then hover-in will be enabled again. So that whenever I do faster hover-in and hover-out the animation will not look like bouncing.
Hope you get what I mean.
here is my fiddle

Upvotes: 0

Views: 866

Answers (3)

doublesharp
doublesharp

Reputation: 27667

If you want to use your existing code and just disable the zoom in/out for X period of time after a full zoom in/out (not using jQuery.stop()), you can use the data() method to set a variable on the DOM element and use setTimeout() to clear it. In this example after the zoom out both actions will be disabled for 1 second (1000 milliseconds).

$img.hover(
    function(){
       // do not zoom in if currently disabled
       if (!$(this).data('disabled')){
            $(this).animate({
               height: o.contentHeight,
               width: o.contentWidth,
               left: "-=" + leftDistance,
               top: "-=" + topDistance
            }, o.speed);  
        }             
    }, 
    function(){
       // do not zoom out if currently disabled
         if (!$(this).data('disabled')){
            // disable zoom in/out by setting 'disabled=true'
            $(this).data('disabled', true);
            // alias this to a variable
            var $this = $(this);
            // use setTimeout to clear the variable after 1000ms
            setTimeout(function(){ $this.data('disabled', false); }, 1000);
            $(this).animate({
               height: o.imageInitHeight,
               width: o.imageInitWidth,
               left: "+=" + leftDistance,
               top: "+=" + topDistance
            }, o.speed);
        }
    }            
);

Upvotes: 1

MatRt
MatRt

Reputation: 3534

This is because animation are pushed in a queue (not all animation are played at the same time) If you move very fast, a lot of animation is enqueue, and is played in the chronological order. This is a the normal behaviour.

If you want to fix this effect, you need to empty the queue of animation each time you begin another animation.

Use this code and you will have what you are expecting

$img.hover(
        function(){                
            $(this).stop(true).animate({
               height: o.contentHeight,
               width: o.contentWidth,
               left: "-=" + leftDistance,
               top: "-=" + topDistance
            }, o.speed);                
        }, 
        function(){
            $(this).stop(true).animate({
               height: o.imageInitHeight,
               width: o.imageInitWidth,
               left: "+=" + leftDistance,
               top: "+=" + topDistance
            }, o.speed);
        }            
    );

The stop(true) method will reset the queue of future animation.

Of course this will not solve the entire problem because you will now have a remaning problem with your position calculation.

You should review this part, and try to use something more simple with animation

Here is a working example: working example

Upvotes: 1

Jamie Hayman
Jamie Hayman

Reputation: 1299

To fix an issue like this you could take advantage of HoverIntent (Plugin).

http://cherne.net/brian/resources/jquery.hoverIntent.html

Simple to use and damn flexible.

Upvotes: 0

Related Questions