如何使用 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 function 但它沒有做我想做的事。 我是JS的新手，有什么幫助嗎？

更新：

如果我要更改 js function 中的寬度，我還想讓它平滑並逐步完成，如下所示：

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

Answer 1

方法 1（CSS 動畫）：

您可以單獨使用 CSS animation 來實現此效果。

此 animation 將#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 過渡）：

It's a little trickier to update CSS @keyframes values via javascript, so here is an alternative to the version above, this time using CSS transition rather than CSS animation .

function 將接受 0 到 100 之間的參數。當 function 運行時， #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>

Answer 2

讓我們嘗試這樣的事情

div {
  width: 0%;
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
  from {width: 0%;}
  to {width: 50%;}
}


<script>

  window. addEventListener('load', () => {

    const myDiv = document.getElementById("ProgressBarPercentage")
    myDiv.classList.add("example")

  })

</script>

Answer 3

如果你真的想在 fage 負載上做一些事情，你可以使用

div {
  width: 0%;
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
  from {width: 0%;}
  to {width: 50%;}
}


<script>
 document.onreadystatechange = function () {
  if (document.readyState === "complete") { 
  // incase you want it on "ready state of page you can use interactive"
  const myDiv = document.getElementById("ProgressBarPercentage")
    myDiv.classList.add("example")
 }
}


</script>