ASP.NET WebForm中jQuery进度条按钮点击动画失效问题排查

算力阿峰

2026-7-31

问题分析与解决

你遇到的核心问题是：页面加载时进度条已经跑完了一次动画，宽度变成了100%，之后点击按钮再执行animate，是把100%的宽度再改成100%，自然看不到任何变化。另外还有几个小细节拖了后腿，下面是具体的修复方案：

需要修正的几个点

重置进度条状态：每次点击按钮前，必须把进度条宽度改回0%，百分比文本也重置为0%，这样动画才能重新启动
删掉多余的stop()：动画完成后本身就会停止，complete回调里的$("#progressbar").stop()完全没必要留着
移除冲突的CSS过渡：你给进度条加了transition: width 1s，这会和jQuery的animate动画打架，导致效果异常，直接删掉这个样式

修正后的完整代码

HTML

<button id="Button1">Start Progress</button>
<div id="progressBarContainer">
    <div id="progressbar"></div>
    <p id="percentage">0%</p>
</div>

CSS

#progressbar {
  height: 20px;
  width: 0%;
  background-color: green;
}

JavaScript

$(document).ready(function () {
    $("#Button1").click(function () {
        // 先重置进度条和百分比
        $("#progressbar").width("0%");
        $("#percentage").text("0%");
        
        var progressBarDuration = 1500;
        $("#progressbar").animate({
            width: "100%"
        }, {
            duration: progressBarDuration,
            step: function (now, fx) {
                $("#percentage").text(Math.round(now) + "%");
            },
            complete: function () {
                // 这里可以加动画完成后的逻辑，比如弹窗提示
                console.log("进度条加载完成");
            }
        });
    });
});