Con jQuery è semplice monitorare le animazioni CSS usando i loro eventi specifici.
Possiamo definire il seguente plugin:
(function( $ ) {
$.fn.animation = function( name, callback ) {
var prefixes = [ "webkit", "moz", "MS", "o", "" ];
var prefixedEvent = function( element, type, callback ) {
for ( var p = 0; p < prefixes.length; p++ ) {
if ( !prefixes[p] ) {
type = type.toLowerCase();
}
element.on( prefixes[p] + type, callback );
}
};
return this.each(function() {
var $element = $( this );
prefixedEvent( $element, name, callback );
});
};
})( jQuery );
Esempio d'uso:
$( "#test" ).animation( "AnimationStart", function() {
console.log( "Animation started:" + Date.now() );
});
$( "#test" ).animation( "AnimationEnd", function() {
console.log( "Animation ended:" + Date.now() );
});