how to stop an animation loop

Question

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 );
});

Answer 1

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.