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的延遲循環得到渴望的結果（延遲（）不工作）

回答

相關問題