how to stop an animation loop

The code below basicly animates a div back and forth. Then I want the animation to stop while hovering. It works if I remove this line: "$(".block").animate({left: '0px'}, 1, animate);" but then the div just animates once wich is not what I want. So how do keep the .stop() functionality but still get the animation to loop in infinity ?

$(function animate(){
$(".block").animate({left: '+=500px'}, 2000);
$(".block").animate({left: '0px'}, 1, animate);
});

$(".block").hover(function(){
$(".block").stop();
$(".block").animate({ width:"20%",开发者_开发百科 height:"20%"}, 500 );
});

Updated

Not sure if:

$(".block").stop( true, true );

is what your looking for.

The first true clears the queue and the last true jumps to the end of the animation queue, effectively ending the animation.

$(".block").stop( true );

This would clear the queue but NOT skip to the end.

I guess you can try writing another function on $(".block").mouseleave() and call animate inside it. This will be triggered when your mouse leaves the div. May be you also try the combination of mouseenter and mouseleave as well. In your case its working fine and stopping the animation as soon as your entering the div area, but there is no function to tell what to do when it comes out of it. I had a similar problem where I was fading an image on mouseover....it works well trying the above.

Hope this helps!