如何动态改变精灵的位置?

this is a sprite i found

这是我找到的精灵

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

any idea how to build the loading animation from this? i tried to change position using a for loop like

知道如何从这个加载动画吗?我尝试使用for循环来改变位置

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

but i can not see any animation maybe because its going too fast?

但是我看不出任何动画因为它太快了?

any idea how to do this?

你知道怎么做吗?

Regards

问候

Ive added the code to jsfiddle with Erik Hesselink solution

我把代码添加到jsfiddle和Erik Hesselink解决方案。

http://jsfiddle.net/X7tGb/

http://jsfiddle.net/X7tGb/

2 个解决方案

#1

To actually see the animation, you have to leave the Javascript execution thread. This can be done by using timeouts. Something like:

要真正看到动画，您必须离开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);

#2

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

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

You may want to try Google there are a ton of results regarding JavaScript sprite animation. The above is one of those results with a working demo.

您可能想尝试谷歌关于JavaScript精灵动画有大量的结果。上面的是其中一个具有工作演示的结果。