Supponiamo di aver creato un'animazione CSS infinita come una barra di caricamento o uno spinner. L'animazione continua ad essere attiva anche quando nascondiamo l'elemento con jQuery. Come possiamo fermarla?
Un'animazione CSS viene associata ad un elemento tramite la at-rule @keyframes che ne definisce il nome. Quindi è sufficiente
creare una classe CSS come la seguente:
#loader.off {
-moz-animation-name: none;
-webkit-animation-name: none;
-ms-animation-name: none;
animation-name: none;
}
Questa classe può essere applicata all'elemento tramite jQuery:
setTimeout(function() {
$( "#loader" ).fadeOut( 1000, function() {
$( this ).addClass( "off" );
});
}, 3000); // 3 secondi di attesa
Per far ripartire l'animazione rimuoviamo semplicemente la classe specificata.