JQuery animation loop on hover

Question

this is probably a very basic question, but I am trying to animate an image (with a kind of pulse effect) when a button is hovered over.

So far I have this:

$("#austriaBtn").mouseenter(
	function animate(){
		$('#austria').animate({width:"35", top:"-=4", left:"-=4"},600);
		$('#austria').animate({width:"27", top:"+=4", left:"+=4"},600, animate);
		}
	);

Now, I can hover over the button (austriaBtn) and the image (austria) starts to pulsate, however, when I take the mouse off, it carries on pulsating. How can I stop it? I know it must be something to do with stop(), but whenever I try to put it in, the animation stops working all together.

Thanks in advance!

Mooseman · Accepted Answer · 2015-01-12 13:08:18Z

1

Put .stop() in a .mouseleave() function.

$("#austriaBtn").mouseleave(function(){ $('#austria').stop(true,true); });

The true arguments in .stop() are as follows:

clear animation queue (default is false; shouldn't be an issue.)
jump to end of animation (default is false; stops the element from being caught in the middle of an animation. important here.)

answered Jan 12, 2015 at 13:08

Mooseman

18.9k14 gold badges74 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Slava Kuznetsov Over a year ago

@Exinferis So I have tried adding the .stop() inside a .mouseleave() as above. However, it is resulting in some very strange and erratic behaviour. When I take the mouse off of the button, the image starts to drift slowly in a diagonal direction, which makes me think that it's not being stopped completely and that the top:"+=4", left:"+=4" are still being executed.

Slava Kuznetsov Over a year ago

Just tried knocking up a jsfiddle but it worked in that o_O Will try to show it in some other way, but it might take a while. Thanks for your help so far, I really appreciate it!

Slava Kuznetsov Over a year ago

@Exinferis Okay, I just tried making another JS fiddle... and yes, it's showing the strange behaviour. i.e. when you mouse on/off quickly, it gets stuck, starts drifting etc. jsfiddle.net/v88j9dx7

Slava Kuznetsov Over a year ago

I still can't seem to figure this one out. I think it's getting stuck in an infinite loop sometimes, or not resetting the values. Any idea why it's doing that?

Exinferis · Accepted Answer · 2015-01-12 13:10:28Z

0

You have to use the corresponding mouseleave event, thus catching the event when the mouse leaves the button and then stop the animation.

$("#austriaBtn").mouseleave(
  function() {
    $("#austria").stop();
  }
);

answered Jan 12, 2015 at 13:10

Exinferis

6877 silver badges17 bronze badges

Comments

Mr.Manhattan · Accepted Answer · 2015-01-12 13:11:09Z

0

you could use a lock variable:

var stopAnimation = false;
$("#austriaBtn").mouseenter(
    function animate(){
        if(stopAnimation){
            stopAnimation = false;
        } else {
            $('#austria').animate({width:"35", top:"-=4", left:"-=4"},600);
            $('#austria').animate({width:"27", top:"+=4", left:"+=4"},600, animate);
        }
    }
);
$("#austriaBtn").mouseleave(
    function(){
        $('#austria').stop();
        stopAnimation = true;
    }
);

answered Jan 12, 2015 at 13:11

Mr.Manhattan

5,5543 gold badges26 silver badges35 bronze badges

Collectives™ on Stack Overflow

JQuery animation loop on hover

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related