jquery - jQuery 动画进度条问题

Question

我有一个小的 jQuery 问题，基本上我正在尝试构建一个进度条，它会在 1-2 秒的时间内从 0 加载到给定的百分比。

看看我到目前为止基于一个教程：JSFiddle

小提琴不会为它设置动画，但让我描述一下实际发生的事情（显然它确实适用于我的测试文件）。

所以进度条确实按预期加载，但它停止在 html 中“title=”的值处。它不接受百分比，所以如果设置的宽度是 460，要让条形图停止在 50%，我必须给它一个 230 的值。

关于这个脚本的另一个问题是，只有第一个柱实际上取实际值，所有其他柱子只是“复制”第一个柱子，不管给它们的值如何。我觉得很奇怪。

我要么正在寻找解决这两个问题的方法，要么正在寻找一种更好的方法来实现所需的效果，最好是输入百分比而不是像素值。

谢谢。

Answer 1

http://jsfiddle.net/mWdgz/4/

$("document").ready(function () {

    // animate the progress bar onload

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

});