Saludos, como se indica en el título, no puedo encadenar múltiples animaciones jQuery.
Necesito usar la función switchClass para alternar progresivamente las clases de arranque con un tiempo específico para construir mi animación. Preferiría que encontré extraño este error, porque recuerdo que la función funcionó como se esperaba hace unas semanas. Aquí el código que había usado:
$(button).switchClass("btn-primary", "btn-warning", 800) $(button).switchClass("btn-warning", "btn-success", 800) $(button).switchClass("btn-success", "btn-primary", 800);Aquí un jFiddle con un ejemplo mínimo de mi escenario, en el que la animación ya no funciona:
Entonces mi pregunta es, ¿cómo puedo ejecutar la transición (switchClass) en el orden descrito anteriormente?
Dada su descripción del objetivo, parece que está intentando que el background-color del elemento del button se desvanezca entre los diferentes colores. Cambiar de clase a través de JS no es una forma ideal de hacerlo.
Un mejor enfoque sería usar CSS para animar los cambios de color usando @keyframes . Se vería algo como esto:
$('button').on('click', e => { $(e.currentTarget).addClass('animate'); }).on('animationend', e => { $(e.target).removeClass('animate'); }); body button.btn.btn-primary:focus { outline: 0; box-shadow: none; } button.animate { animation: background-fade 2.4s; } @keyframes background-fade { 0% { background-color: #007bff; border-color: #007bff; } 33% { background-color: #ffc107; border-color: #ffc107; } 66% { background-color: #28a745; border-color: #28a745; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <p>Click the button to see the colour fade animation:</p> <div class="row mt-2 ml-2"> <button class="btn btn-primary text-uppercase edit" type="button"> <span class="edit-label">Animate</span> <span class="spinner-grow spinner-grow-sm edit-spinner" role="status" aria-hidden="true" style="display:none;"></span> </button> </div>