1

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>

1
  • Ademas de parar la animación, debes parar el setinterval, con un clearInterval. Commented el 7 abr. 2021 a las 19:57

1 respuesta 1

1

Te sugiero guardar el evento de setInterval y limpiarlo cuando para la animación, de lo contrario se seguirá ejecutando. También no sé porque asignas dos eventos de click de manera separada, podrías hacerlo en el mismo.

Puedes utilizar la misma variable que guarda la referencia del setInterval para ver si la animación está corriendo o no.

Cómo dice Triby es mejor sacar la función del evento, de lo contrario estamos creando una nueva instancia con cada click del usuario.

let refInterval = null;

function empezarAnimacion() {
  $("#divTarget").animate({
      left: "+=200px"
    }, 2000)
    .animate({
      left: "-=200px"
    }, 2000);
}

$("#movContinuo").click(function() {
  if (refInterval) {
    $("#divTarget").stop(true);
    clearInterval(refInterval);
    refInterval = null;
  } else {
    refInterval = setInterval(empezarAnimacion, 2000);
  }
});
#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>

3
  • 1
    Buena respuesta; solo sacaría la función empezarAnimacion() de ahí, porque se estaría creando cada vez que se activa la animación.
    – Triby
    Commented el 7 abr. 2021 a las 20:28
  • ¡Tienes toda la razón! Ya lo cambio.
    – FranAcuna
    Commented el 7 abr. 2021 a las 20:33
  • ¡Muchas gracias a los dos! funciona perfectamente, ahora ya veo por que me repetía la animación.
    – Irene
    Commented el 8 abr. 2021 a las 15:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.