如何動態更改精靈位置？

enter image description here

.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循環像

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

但我看不到任何動畫，也許是因爲它的速度太快？

任何想法如何做到這一點？

問候

伊夫添加的代碼與埃裏克海塞林克到的jsfiddle解決方案

http://jsfiddle.net/X7tGb/

來源

2011-12-05 Gihan Lasita

您可能想在jsfiddle.net等網站上發佈工作演示，然後發佈鏈接。如果你想在JavaScript中使用「動畫」，你應該把它放在延遲循環setTimeout，setInterval等 –

要真正看到動畫，您必須離開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);

來源

2011-12-05 18:59:06

謝謝你的解決方案ive現在把它添加到jsfiddle它看起來像這樣http://jsfiddle.net/X7tGb/ –

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

你可能想嘗試谷歌有關於JavaScript的精靈一噸結果動畫。以上是其中一個工作演示的結果。

來源

2011-12-05 18:58:42

如何動態更改精靈位置？

回答

相關問題