Как динамически изменить позицию спрайта?

Question

это спрайт, который я нашел

.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>

Есть идеи, как построить анимацию загрузки из этого? я пытался изменить положение, используя цикл как

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

но я не вижу никакой анимации, может быть, потому что она идет слишком быстро?

есть идеи, как это сделать?

С уважением

Я добавил код в jsfiddle с помощью Эрик Хесселинк решение

http://jsfiddle.net/X7tGb/

Answer 1

Чтобы увидеть анимацию, вы должны покинуть поток выполнения Javascript.Это можно сделать с помощью таймаутов.Что-то вроде:

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/

Возможно, вы захотите попробовать Google, есть множество результатов, касающихся анимации спрайтов JavaScript. Выше приведен один из результатов с рабочей демонстрацией.