Javascript css精灵动画的设置间隔

我正在尝试使用下面的代码制作一个精灵的动画，但是在进入循环的下一次迭代之前没有等待大约1秒，动画似乎在大约1秒内从精灵中的第一个图像跳到最后一个图像。有人能告诉我如何修改代码，使其按照我的想法工作吗？谢谢

preview = setInterval(animation,1000);
counter = 0; 

function animation() {
    while (counter < 81){
        position = counter * 1.25;
        $('#ad_1').css({"background-position" : position + "% 0%"});
        counter ++;
    }
};

preview; 

preview=setInterval（动画，1000）；
计数器=0；
函数动画（）{
而（计数器<81）{
位置=计数器*1.25；
$（'ad#u 1'）.css（{“背景位置”：位置+%0%”）；
计数器++；
}
};
预览

您的while循环导致在第一次间隔调用中发生所有事情。 删除它，您将完全取决于时间间隔：

preview = setInterval(animation,1000);
counter = 0; 

function animation() {
        position = counter * 1.25;
        $('#ad_1').css({"background-position" : position + "% 0%"});
        counter ++;        
};

preview; 

---

实例：

var preview=setInterval（动画，100）；
var计数器=0；
函数动画（）{
位置=计数器*1.25；
$（'ad#u 1'）.css（{“背景位置”：位置+%0%”）；
计数器++；
};
div{
高度：317px；
宽度：50px；
显示：内联块；
背景：url(https://pbs.twimg.com/profile_images/2186972673/super_mario.jpg);
}
您的while循环导致在第一次间隔调用中发生所有事情。
删除它，您将完全取决于时间间隔：

preview = setInterval(animation,1000);
counter = 0; 

function animation() {
        position = counter * 1.25;
        $('#ad_1').css({"background-position" : position + "% 0%"});
        counter ++;        
};

preview; 


实例：


var preview=setInterval（动画，100）；
var计数器=0；
函数动画（）{
位置=计数器*1.25；
$（'ad#u 1'）.css（{“背景位置”：位置+%0%”）；
计数器++；
};
div{
高度：317px；
宽度：50px；
显示：内联块；
背景：url(https://pbs.twimg.com/profile_images/2186972673/super_mario.jpg);
}
取出循环的while部分

function animation() {
    if (counter < 81){
        position = counter * 1.25;
        $('#ad_1').css({"background-position" : position + "% 0%"});
        counter ++;
    } else {
         clearInterval(preview); /* this will stop the interval timer, since you won't need it after 80 repetitions. */
         preview = null;
    }
}

函数动画（）{
如果（计数器<81）{
位置=计数器*1.25；
$（'ad#u 1'）.css（{“背景位置”：位置+%0%”）；
计数器++；
}否则{
clearInterval（预览）；/*这将停止间隔计时器，因为重复80次后您将不需要它*/
预览=空；
}
}
取出循环的while部分

function animation() {
    if (counter < 81){
        position = counter * 1.25;
        $('#ad_1').css({"background-position" : position + "% 0%"});
        counter ++;
    } else {
         clearInterval(preview); /* this will stop the interval timer, since you won't need it after 80 repetitions. */
         preview = null;
    }
}

函数动画（）{
如果（计数器<81）{
位置=计数器*1.25；
$（'ad#u 1'）.css（{“背景位置”：位置+%0%”）；
计数器++；
}否则{
clearInterval（预览）；/*这将停止间隔计时器，因为重复80次后您将不需要它*/
预览=空；
}
}