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

Question

Код ниже в основном анимирует 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 );
});

Answer 1

Обновлено

Не уверен, если:

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

это то, что вы ищете.

Первый true очищает очередь, а последний true переходит в конец очереди анимации, эффективно заканчивая анимацию.

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

Это очистит очередь, но НЕ пропустит до конца.

Answer 2

Полагаю, вы можете попробовать написать другую функцию в $ (". Block"). Mouseleave () и вызвать в ней animate.Это будет срабатывать, когда ваша мышь покидает div.Может быть, вы также попробуете комбинацию mouseenter и mouseleave.В вашем случае он работает нормально и останавливает анимацию, как только вы входите в область div, но нет функции, чтобы сказать, что делать, когда она выходит из нее.У меня была похожая проблема, когда я терял изображение при наведении курсора мыши ... он хорошо работает, пытаясь описать выше.

Надеюсь, это поможет!