如何用JavaScript或jQuery实现Div元素加载时平滑过渡及动态调整宽度？

嘿，我来帮你搞定这个进度条平滑动画的问题！作为JS新手，遇到这种小坑很正常，我先帮你分析下之前两种方法的问题，再给你几个靠谱的解决方案～

一、先修复你的jQuery代码（解决无法运行的问题） #

你的jQuery代码跑不起来，核心问题是你给元素加了runat="server"，ASP.NET会自动修改客户端的ID（比如把ProgressBarPercentage改成ctl00_ProgressBarPercentage），导致$("#ProgressBarPercentage")找不到目标元素。另外，你之前用像素值做动画，和元素本身的百分比样式不匹配，也会导致效果不对。

修复步骤： #

1. 先确保能正确选中元素：
   要么给元素设置ClientIDMode="Static"，让客户端ID和服务器端ID一致：

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

   要么在JS里用ASP.NET的ClientID输出正确的ID：

   $("#<%= ProgressBarPercentage.ClientID %>")
   

2. 修改动画逻辑，用百分比而非像素：

   $(function () {
     // 选中进度条元素
     var $progressBar = $("#<%= ProgressBarPercentage.ClientID %>");
     // 提取初始目标百分比（从style属性里拿）
     var targetPercent = parseFloat($progressBar.css('width'));
     // 先把宽度设为0，再动画到目标百分比
     $progressBar.width(0)
                 .animate({ width: targetPercent + "%" }, 1200);
   });
   

二、改进原生JavaScript函数（支持自定义目标宽度） #

你的原生JS函数硬编码了“到100%”，我们把它改成可以接收任意目标百分比的版本，不管是初始的50%还是动态设置的67%都能适配：

function animateProgressBar(targetPercent) {
  // 注意：如果设置了ClientIDMode="Static"，直接写'ProgressBarPercentage'就行
  var barElement = document.getElementById('<%= ProgressBarPercentage.ClientID %>');
  var currentWidth = 0;
  var duration = 1200; // 动画时长1.2秒，和jQuery版本一致
  // 计算每10ms需要增加的宽度，保证动画平滑
  var step = targetPercent / (duration / 10);

  var intervalId = setInterval(function() {
    if (currentWidth >= targetPercent) {
      clearInterval(intervalId);
      // 最后强制设置为目标值，避免浮点计算的小误差
      barElement.style.width = targetPercent + '%';
    } else {
      currentWidth += step;
      barElement.style.width = currentWidth + '%';
    }
  }, 10);
}

// 页面加载完成后，动画到初始的50%
window.onload = function() {
  var initialTarget = parseFloat(document.getElementById('<%= ProgressBarPercentage.ClientID %>').style.width);
  animateProgressBar(initialTarget);
};

// 动态设置到67%的话，直接调用：
// animateProgressBar(67);

三、额外推荐：用CSS过渡实现更简单！ #

其实还有更省心的方法——用CSS的transition属性，不需要写复杂的JS动画，性能还更好：

第一步：给进度条加CSS过渡效果 #

#ProgressBarPercentage {
  transition: width 1.2s ease; /* 1.2秒平滑过渡，ease是自然的缓动效果 */
}

第二步：用JS控制宽度即可 #

window.onload = function() {
  var barElement = document.getElementById('<%= ProgressBarPercentage.ClientID %>');
  var targetPercent = parseFloat(barElement.style.width);
  // 先设为0，加个小延迟让浏览器渲染这个状态，再触发过渡
  barElement.style.width = '0%';
  setTimeout(function() {
    barElement.style.width = targetPercent + '%';
  }, 10);
};

// 动态设置宽度时，直接赋值就会自动平滑过渡：
function setProgress(targetPercent) {
  var barElement = document.getElementById('<%= ProgressBarPercentage.ClientID %>');
  barElement.style.width = targetPercent + '%';
}
// 调用setProgress(67)就会平滑过渡到67%

这个方法代码最少，对新手友好，而且CSS动画是浏览器原生支持的，比JS动画更流畅～

内容的提问来源于stack exchange，提问作者Milan Conhye