> Faqs > Cómo hacer una animación jQuery que se repite indefinidamente

Cómo hacer una animación jQuery que se repite indefinidamente

¿Cómo puedo hacer que mi animacion se repita continuamente?

Este es mi comando:

$(".main-titulo").animate({color: "#ff00ff"}, 6000);

Tengo un título que quiero que cambie de color indefinidamente.

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Es una idea pésima hacer animaciones con jQuery. Es infinitamente mejor usar CSS, por versatilidad, reusabilidad, por rendimiento y quién sabe cuántos más motivos.

Por ejemplo, puedes hacer una animación de ida y vuelta que se repita infinitamente, indicando los valores "alternate infinite" a declarar la animación con CSS.

Te dejo un ejemplo de animación CSS para que puedas jugar un poco:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animación infinita</title>

    <style>
      .elementoAnimado {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color: orange;
        color: #fff;
        border-radius: 10px;
        position: relative;
        width: 100px;
        height: 100px;
        font-size: 0.85rem;
        animation: infinta 10s alternate infinite linear;
      }

      @keyframes infinta {
        0% {
          top: 100px;
          left: 40px;
          -webkit-transform: rotate(0deg);
        }
        20% {
          top: 120px;
          left: 50px;
          -webkit-transform: rotate(20deg);
        }
        90% {
          top: 190px;
          left: 220px;
          -webkit-transform: rotate(340deg);
        }
        100% {
          top: 200px;
          left:240px;
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="elementoAnimado">
      Soy una animación infinita!!!
    </div>
  </body>
</html>

Puedes aprender más sobre animaciones CSS aquí.

Julian
332 10 31 23

En jQuery tienes las colas de efectos para encadenar animaciones, o como es tu caso, hacer una animación que se invoca otra vez después de que ha terminado.

Gracias a las colas de efectos conseguirás tú objetivo de realizar una animación que se repite indefinidamente.

Colas de efectos jQuery

Salva
249 3 18 1