jQuery: animare la posizione delle immagini di sfondo

jQuery ci permette di animare molte proprietà CSS, tra cui background-position. Vediamo insieme questa soluzione.

Possiamo creare il seguente plugin:

(function( $ ) {
	$.fn.animateBgPosition = function( x, y, speed ) {
    	var pos = this.css( "background-position" ).split( " " );
    	
    	
		this.x = parseInt( pos[0], 10 ) || 0;
		this.y = parseInt( pos[1], 10 ) || 0;
    
    	$.Animation( this, {
        	x: x,
			y: y
      	}, { 
        	duration: speed
      	}).progress( function( e ) {
          	this.css( "background-position", e.tweens[0].now + "px " + e.tweens[1].now + "px" );
    	});
		
		return this;
	};
})( jQuery );