Greetings as stated in the title i am unable to chain multiple jQuery animation.
I need to use switchClass function to progressively toggle bootstrap classes with a specific timing to build up my animation. I would premit that i found strange this error, because i rememer that the function worked as intended few week ago. Here the code i had used :
$(button).switchClass("btn-primary", "btn-warning", 800)
$(button).switchClass("btn-warning", "btn-success", 800)
$(button).switchClass("btn-success", "btn-primary", 800);
Here a jFiddle with a minimal example of my scenario, in which i the animation does not work anymore :
So my question is, how can i execute the transition (switchClass) in the order described above?
Given your description of the goal, it appears you're attempting to have the background-color of the button element fadde between the different colours. Switching classes through JS is not an ideal way of doing that.
A better approach would be to use CSS to animate the colour changes using @keyframes. It would look something like this:
$('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>