jQuery的同時通過while循環

$(document).ready(function() { 
    var i; 
    while($(".loader .point").width() < $(window).width()) { 
     i++; 
     $(".loader .point").css("width", $(".loader .point").width() + 5); 
    } 
});

我試圖使用的jQuery的同時通過while循環

setTimeout(function() { /*action*/ }, i * 100);

遞增和擴展點的寬度

delay(i * 100);

但沒有這些似乎一事無成並且該頁面只是試圖處理上述setTimeout函數，直到它超時爲止，如果我使用delay，增量之間沒有延遲，意味着該點延伸到寬度o立即開窗。

任何想法傢伙？謝謝！

來源

2015-03-31 Jack hardcastle

你知道jQuery有一個動畫方法嗎？ – adeneo 2015-03-31 13:22:47

是的@adeneo，我的 – 2015-03-31 13:23:10

爲了進一步闡明我不想使用jQuery的動畫的原因是因爲我想增加5px的階段，而不是流動的動畫。 – 2015-03-31 13:24:44

你不能在這樣的循環中堆積一堆CSS變化。在代碼完成之前，瀏覽器不會執行任何實際的佈局更新。你可以把在自行復位，直至滿足終止條件超時處理程序的變化，像

$(function() { 
    var $point = $(".loader .point"), 
     windowWidth = $(window).width(); 

    function expand() { 
    var pw = $point.width(); 
    console.log("pw " + pw); 
    if (pw >= windowWidth) 
     return; 
    $point.width((pw + 5) + "px"); 
    setTimeout(expand, 500); 
    } 

    expand(); 
});

注意，代碼只查找「點」元素一次，這是通常一個好習慣發展。

Here's a working codepen.

來源

2015-03-31 13:37:04 Pointy

jQuery的同時通過while循環

回答

相關問題