как остановить цикл анимации

Приведенный ниже код в основном анимирует div вперед и назад. Затем я хочу, чтобы анимация останавливалась при наведении курсора. Это сработает, если я удалю эту строку: "$ (". Block "). Animate ({left: '0px'}, 1, animate);" но тогда div просто анимируется один раз, чего я не хочу. Так как же сохранить функциональность .stop (), но при этом заставить анимацию зацикливаться на бесконечности?

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