Tengo que hacer una animación de un div que debe moverse a la izquierda y a la derecha continuamente, en este caso lo he hecho con un setInterval() para que me realice el bucle. Después tengo que parar la animación completamente clicando el mismo div con un .stop(). El problema es que la animación se detiene los segundos que le he puesto al setInterval() y vuelve a empezar la animación. He intentado muchas cosas pero no me para del todo la animación. Muchas gracias a todo.
$("#movContinuo").click(function() {
function empezarAnimacion() {
$("#divTarget").animate({
left: "+=200px"
}, 2000)
.animate({
left: "-=200px"
}, 2000);
}
setInterval(empezarAnimacion, 2000);
});
$("#movContinuo").click(function() {
$("#divTarget").stop(true);
});
#divTarget {
background-color: red;
width: 100px;
height: 100px;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divTarget">
</div>
<button id="movContinuo">
Mover
</button>