1

我有这个用 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)}

进度条的 HTML 如下所示：

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

目前我的 jQuery 代码如下所示：

$(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);

虽然这不起作用。它什么也没做。我怎样才能正确地做到这一点？

小提示：我还想增加标签内的文字。

4

1 回答 1

1

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

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

写

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

http://jsfiddle.net/jfGE9/1/

于 2013-05-23T15:35:50.833 回答