jQuery: monitorare le animazioni CSS usando gli eventi

jQuery: monitorare le animazioni CSS usando gli eventi

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() );
});

Torna su