Question

我想循环一个动画，它实际上改变了背景位置150毫秒。它不会褪色或任何东西，它只需要一次又一次地发生。但我似乎找不到循环这些指令的解决方案。

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -47px');
    }, 150 );

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -94px');
    }, 250 );

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -141px');
    }, 350 );

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -188px');
    }, 450 );

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -235px');
    }, 550 );

Answer 1

使用setInterval代替setTimeout。

还可以使用全局变量来查看背景图像的位置，而不是设置大量超时...

所以你最终得到这样的东西：

var currPos = 0;
setInterval(function(){
    currPos = currPos-47;
    if(currPos < -235){
        currPos = 0;
    }
    $('div.arrow').css('backgroundPosition','0 '+currPos+'px');
}, 150);

请参阅此处的示例：http://jsfiddle.net/aUBNw/

Answer 2

var div = $('div.arrow');
function tim(){
setTimeout( function() {
        div.css('backgroundPosition', '0 -47px');
    }, 150 );

setTimeout( function() {
        div.css('backgroundPosition', '0 -94px');
    }, 250 );

setTimeout( function() {
        div.css('backgroundPosition', '0 -141px');
    }, 350 );

setTimeout( function() {
        div.css('backgroundPosition', '0 -188px');
    }, 450 );

setTimeout( function() {
        div.css('backgroundPosition', '0 -235px');
    }, 550 );
setTimeout( function() {
        tim();
    }, 550 );
}
tim();

完成后

将自行调用

Javascript，循环一组指令（设置超时）

2 个答案: