jQuery-页面加载时填充进度栏

我用CSS制作了这个进度条：

CSS

.progress{height:20px;background:#ebebeb;border-left:1px solid transparent;border-right:1px solid transparent;border-radius:10px}
.progress>span{position:relative;float:left;margin:0 -1px;min-width:30px;height:18px;line-height:16px;text-align:right;background:#ccc;border:1px solid;border-color:#bfbfbf #b3b3b3 #9e9e9e;border-radius:10px;background-image:-webkit-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#ccc);background-image:-moz-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#ccc);background-image:-o-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#ccc);background-image:linear-gradient(to bottom,#f0f0f0,#dbdbdb 70%,#ccc);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2)}
.progress>span>span{padding:0 8px;font-size:11px;font-weight:bold;color:#404040;color:rgba(0,0,0,0.7);text-shadow:0 1px rgba(255,255,255,0.4)}
.progress>span:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;height:18px;background:url("../images/progress.png") 0 0 repeat-x;border-radius:10px}
.progress .green{background:#85c440;border-color:#78b337 #6ba031 #568128;background-image:-webkit-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:-moz-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:-o-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:linear-gradient(to bottom,#b7dc8e,#99ce5f 70%,#85c440)}

progressbar的HTML如下所示：

<div class='progress'>
<span class='green' style='width: 1%;' id='progressBar'><span>1%</span></span>
</div>

$(document).ready(function(){
 $('#progressBar').progressbar({
             value: 1
         });
});
var statusTracker;
var percentage = 0;

function checkStatus() {
    percentage = percentage + 5;
    $('#progressBar > .green').animate({
        width : percentage + '%'
    });

    if (percentage == 100) stop();
}
function startProgress(){
    statusTracker = setInterval(checkStatus, 500);
}

function stop() {
    clearInterval(statusTracker);
}
$(document).ready(startProgress); 

虽然这不起作用。它没有任何作用。我怎样才能纠正这个错误

---

小提示：我还希望标记中的文本增加。您使用了错误的jQuery选择器，而不是：

$('#progressBar > .green').animate({...});

写

$('#progressBar.green').animate({...});

---

您使用了错误的jQuery选择器，而不是：

$('#progressBar > .green').animate({...});

写

$('#progressBar.green').animate({...});

---

我不确定，但两次调用document ready是否正确？我已经这样做了，是的！我不确定，但两次调用document ready是否正确？我就是这么做的，是的！哇，谢谢！有没有办法使动画更平滑？另外，我如何增加span标签中显示的数字？请接受答案，我将帮助您。完成后，我会将其添加到注释中。下面是代码。您必须注意，我使用了CSS3动画，并因此删除了jQuery动画。对你来说够了吗？我很高兴我能帮助你：）哇，谢谢！有没有办法使动画更平滑？另外，我如何增加span标签中显示的数字？请接受答案，我将帮助您。完成后，我会将其添加到注释中。下面是代码。您必须注意，我使用了CSS3动画，并因此删除了jQuery动画。这对你来说够了吗？我很高兴能帮助你：）