JS/jQuery的延迟循环得到渴望的结果（延迟（）不工作）

我试图通过移动在一个循环的图像的CSS的背景位置'来创建一个加载图标：JS/jQuery的延迟循环得到渴望的结果（延迟（）不工作）

$('#LoginButton').click(function() { 

    var i = 1, h = 0, top; 

    for (i = 0; i <= 12; i++) { 
     h = i * 40; 
     top = h + 'px'; 
     $('#ajaxLoading').css('background-position', '0 -' + top).delay(800); 
    } 

});

这里的问题是它运行速度很快，所以我不选择移动背景的“动画”。所以我添加了jquerys延迟（），但：

延迟（800）不起作用，因为delay（）只适用于jquery动画效果，.css（）不是其中之一。

如何延迟这个循环？

来源

2010-11-11 Jonathan

你会介意评论我的答案在下面？ – 2010-11-11 11:20:07

我建议使用jQuery插件定时器：http://jquery.offput.ca/js/jquery.timers.js

$('#LoginButton').click(function() { 
    var times = 13; 
    var delay = 300; 
    var h = 0, top; 
    $(document).everyTime(delay, function(i) { 
     top = h + 'px'; 
     $('#ajaxLoading').css('background-position', '0 -' + top); 
     h += 40; 
    }, times); 
});

如果你不希望任何插件，使用setInterva/clearInterval：

$('#LoginButton').click(function() { 
    var delay = 300; 
    var times = 13; 
    var i = 0, h = 0, top; 

    doMove = function() { 
     top = h + 'px'; 
     $('#ajaxLoading').css('background-position', '0 -' + top); 
     h += 40; 

     ++i; 
     if(i >= times) { 
      clearInterval(interval) ; 
     } 
    } 

    var interval = setInterval ("doMove()", delay); 
});

来源

2010-11-11 09:45:21

这太好了！圣沃兰，你救了我很多悲伤。注意nubes：delay var的单位是毫秒..所以如果你想将它转换为秒，请这样做：var interval = setInterval（“doMove（）”，delay * 1000）; – 2011-09-06 18:31:59

您可以使用setTimeout（）和clearTimeout（）函数来完成该操作。

IE：

var GLOBAL_i = 0; 

function doAnimation() { 

    var h = GLOBAL_i * 40; 
    var top = h + 'px'; 
    $('#ajaxLoading').css('background-position', '0 -' + top); 

    if (GLOBAL_i < 12) { 
     GLOBAL_i++; 

     t=setTimeout(doAnimation, 800); 
    } 
} 

$('#LoginButton').click(function() { 

    doAnimation() 

});

来源

2010-11-11 09:34:46 MatuDuke

是的，我知道，但如何？ – Jonathan 2010-11-11 09:41:44

更好用setInterval/clearInterval – 2010-11-11 09:58:35

我加了一些例子... – MatuDuke 2010-11-11 09:58:58

你有没有看使用动画（）而不是CSS（）？我不是100％确定的，我明白你想要完成什么，所以这在黑暗中有点像。

来源

2010-11-11 09:36:11 SPoage

我不想动画，因为我会看到背景移动。我希望它'跳'，所以我使用CSS。 – Jonathan 2010-11-11 09:42:24

在这种情况下，您需要定义一个函数，如上所述更改元素的位置，然后使用setTimeout（）调用它。然后一旦加载完成，在定义的定时器上调用clearTimeout（）以防止它继续运行。 – SPoage 2010-11-11 09:46:17

更好用setInterval/clearInterval – 2010-11-11 09:58:55

铬， Safari和IE3 +应该支持background-position-y，所以如果你针对的是这些特定的浏览器，那么使用jquery你可以做一个定时的animation()上backgroundPositionY财产 - http://snook.ca/archives/html_and_css/background-position-x-y （在Firefox上的效果将无法正常工作）

来源

2010-11-11 09:56:06

JS/jQuery的延迟循环得到渴望的结果（延迟（）不工作）

回答

相关问题