javascript - jQuery通过while循环递增时扩展点的宽度

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

我试图利用

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

和

delay(i * 100);

但是这些似乎都无法实现，并且页面只是试图处理上述setTimeout函数直到超时，如果我使用delay，则两次增量之间没有延迟，这意味着该点会扩展到窗口的宽度立即。

有想法吗？谢谢！

最佳答案

您不能像这样在循环中堆积大量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();
});

请注意，代码只查找一次“ point”元素，即
通常养成良好的习惯。

Here's a working codepen.

关于javascript - jQuery通过while循环递增时扩展点的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29369725/