cómo cambiar la posición de los sprites de forma dinámica?

Question

esto es un sprite he encontrado

.common-spinner.common-spinner-40x55 { 
    height: 55px; 
    width: 40px; 
} 

.common-spinner { 
    background: url("images/loading-sprite.png") no-repeat scroll 100% 100% transparent; 
} 

<div class="loading"> 
<div class="common-spinner common-spinner-40x55" style="background-position: 0px 0px;"></div> 
</div> 

alguna idea de cómo construir la animación de carga de esto? He intentado cambiar la posición utilizando un bucle como

for(i=0; i<=720;) { 
    $('.common-spinner').css('background-position', '-'+i+'px 0px'); 
    i=i+20; 
} 

pero no puedo ver ninguna animación tal vez porque su ir demasiado rápido?

alguna idea de cómo hacer esto?

Saludos

he añadido el código a jsFiddle con Erik Hesselink solución

http://jsfiddle.net/X7tGb/

Answer 1

Para ver realmente la animación, debe dejar el hilo de ejecución de Javascript. Esto se puede hacer mediante el uso de tiempos de espera. Algo como:

function setBgPosition (px) 
{ 
    return function() 
    { 
    $('.common-spinner').css('background-position', '-' + px + 'px 0px'); 
    if (px < 720) setTimeout(setBgPosition(px + 20), 100); 
    } 
} 

setTimeout(setBgPosition(0), 100); 

Answer 2

http://addyosmani.com/blog/jquery-sprite-animation/

Es posible que desee probar Google hay un montón de resultados con respecto JavaScript sprites animación. Lo anterior es uno de esos resultados con una demostración funcional.