Question

$(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，则增量之间没有延迟意味着该点立即延伸到窗口的宽度。

任何想法的家伙？谢谢！

Answer 1

你不能在这样的循环中堆积一堆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.

Jquery通过while循环递增时扩展点的宽度

1 个答案: