jak dynamicznie zmieniać pozycję sprite?

Question

to sprite znalazłem

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

jakiś pomysł, jak zbudować animację ładowania z tego? Próbowałem zmienić pozycję za pomocą pętli for jak

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

ale ja nie widzę żadnej animacji może dlatego, że jej będzie zbyt szybko?

jakikolwiek pomysł, jak to zrobić?

Pozdrowienia

Ive dodaniu kodu do jsfiddle z Erik Hesselink roztworowi

http://jsfiddle.net/X7tGb/

Answer 1

Aby zobaczyć animację, musisz opuścić wątek wykonywania Javascript. Można to zrobić za pomocą limitów czasu. Coś jak:

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/

może chcesz spróbować Google istnieje mnóstwo wyników dotyczące ikonki JavaScript animacja. Powyższe jest jednym z tych wyników z działającym demo.