jquery - 百分比进度条

Question

我刚刚在这里找到了动画进度条

我想知道如何在这些进度条加载时为每个条添加运行百分比。

请帮忙。谢谢！

这是CSS

    <style type='text/css'>
    .progress_container {
    height:25px;
    border-radius: 3px;
    overflow:hidden;
    background:red;
    width: 460px;
}
.progress_bar {
    height:25px;
    width: 0px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background:black;
}
.progress_container {
    margin-bottom: 30px;
}
}
  </style>

这是JQuery

  <script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("document").ready(function () {

    // animate the progress bar onload

    $('.progress_bar').each(function () {
        $(this).animate({
            width: this.title
        }, 1000);
    })

});
});//]]>  

</script>

这里是身体

  <div class="progress_container">
    <div class="progress_bar tip" title="98%"></div>
</div>
<div class="progress_container">
    <div class="progress_bar tip" title="58%"></div>
</div>
<div class="progress_container">
    <div class="progress_bar tip" title="28%"></div>
</div>

Answer 1

您将为此使用 step 方法：

$('.progress_bar').each(function () {
    $(this).animate(
      {
         width: this.title
      }, {
        duration: 1000,
        step    : function( current ) {
                    $(this).html(parseInt(current, 10)+'%')
        }
    });
});

小提琴

Answer 2

尝试添加另一个 div 并添加一些 css 以根据需要定位文本。

这是一个jsFiddle

<div class="progress_container">
    <div id="progress"></div>
    <div class="progress_bar tip" title="100%"></div>
</div>

CSS

#progress {
    color: white;
    position: absolute;
    left: 50%;
}

Answer 3

无需将百分比放入标题中，而是将值放入数据元素并计算百分比，然后您可以轻松添加：

HTML：

<div class="progress_container">
    <div class="progress_bar tip" id="pb3" data-percent="28"></div>
</div>

<button id="Add">Add</button>

JS：

$("document").ready(function () {
    // animate the progress bar onload
    updatePercent();
});

function updatePercent() {

    $('.progress_bar').each(function () {
        $(this).animate({
            width: $(this).data("percent") + "%"
        }, 1000);
    })
}

$("#Add").click(function () {
    var currVal = $("#pb3").data("percent");
    $("#pb3").data("percent", currVal + 10);
    updatePercent();
});

更新小提琴：http: //jsfiddle.net/mWdgz/32/