javascript - 如何使用 JavaScript 或 JQuery 在页面加载时更改 Div 元素的样式宽度？

Question

我目前有以下 div 元素；

 <div id="ProgressBar">
     <div id="ProgressBarPercentage" style="width: 50%" runat="server"></div>
 </div>

我希望它能使宽度从 0% 平滑地递增到 50%。

到目前为止我尝试过的(它不起作用):

$(function () {
    $("#ProgressBarPercentage").each(function () {
        console.log("1");
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
            }, 1200);
     });
});

我也在尝试玩弄:

function update() {
    var element = document.getElementById("ProgressBarPercentage");
    var width = 1;
    var identity = setInterval(scene, 10);
    function scene() {
        if (width >= 100) {
            clearInterval(identity);
        } else {
            width++;
            element.style.width = width + '%';
        }
    }
}

上面的代码适用于 windows.load 函数，但它没有按照我的意愿执行。我是 JS 新手，有什么帮助吗？

更新:

如果我要更改 js 函数中的宽度，我也想让它平滑并逐步完成，如下所示:

document.getElementById("ProgressBarPercentage").style.width = 67%;

Answer 1

方法 1(CSS 动画):

您可以单独使用 CSS 动画来实现此效果。

此动画将 #ProgressBarPercentage 的宽度从 0 设置为 100%。

工作示例:

#ProgressBar {
  margin-top: 30px;
  height: 30px;
  padding: 15px;
  background-color: rgb(0, 0, 0);
}

#ProgressBarPercentage {
 height: 30px;
 background-color: rgb(255, 0, 0);
 animation: loadProgressBar 4s linear;
}

@keyframes loadProgressBar {

   0% {width: 0;}
 100% {width: 100%;}
}

<div id="ProgressBar">
<div id="ProgressBarPercentage"></div>
</div>

---

方法 2(CSS 转换):

通过 javascript 更新 CSS @keyframes 值有点棘手，所以这里是上述版本的替代方案，这次使用 CSS transition 而不是 CSS 动画。

该函数将接受 0 到 100 之间的参数。当函数运行时，#ProgressBarPercentage 将从其当前值转换为新值。

工作示例:

const progressBarPercentage = document.getElementById('ProgressBarPercentage');

const transitionProgressBar = (progress) => {

  setTimeout(() => {
    progressBarPercentage.style.width = progress + '%';
  }, 200);
}

// INITIAL TRANSITION (on PAGE LOAD)
transitionProgressBar(32);

// SUBSEQUENT TRANSITIONS
setTimeout(() => {transitionProgressBar(59)}, 4000);
setTimeout(() => {transitionProgressBar(78)}, 8000);
setTimeout(() => {transitionProgressBar(96)}, 12000);

#ProgressBar {
  margin-top: 30px;
  height: 30px;
  padding: 15px;
  background-color: rgb(0, 0, 0);
}

#ProgressBarPercentage {
 width: 0;
 height: 30px;
 background-color: rgb(255, 0, 0);
 transition: width 2s linear;
}

<div id="ProgressBar">
<div id="ProgressBarPercentage"></div>
</div>