使用jquery为几个进度条设置动画

时间:2015-11-08 23:34:07

标签: javascript jquery html css twitter-bootstrap


我尝试编写js来根据其宽度为几个引导进度条设置动画。我编写简单的代码,但它不起作用,可能是因为它带有类进度条的第一个DOM元素的值。你能建议我怎么解决这个问题?非常感谢你:)

这是我的代码:

HTML

<h5>Zapotrzebowanie na kawę</h5>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete (danger)
    </div>
  </div>

  <h5>J. Angielski</h5>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      C1 (danger)
    </div>
  </div>
    <h5>j. Niemiecki</h5>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      A2
    </div>
  </div>

JS

$(function () {
var cWidth = $('.progress-bar').css("width")
$(".progress-bar").animate({width: cWidth}, 1500)
});

修改 所以我设法通过使用@streetlamp

提供的修改代码来解决问题

然而我对此并不十分满意,因此对它有点冻结。不够顺利。你有什么建议吗?

$(".progress-bar").css("width", "0px")
$(function() {
    $(".progress-bar").each(function() {
        var finalWidth = parseInt($(this).attr("aria-valuenow"));
        $(this).css("width", "0px").animate({width: finalWidth+"%"}, 1000);
    });
});

到目前为止,感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

使用$.each()循环遍历元素,并将每个元素设置为元素的aria-valuenow参数的值(在生产中实际上不执行此操作,aria-valuenow应该是值< EM>现在):

$(function() {
    $(".progress-bar").each(function() {
        var finalWidth = parseInt($(this).attr("aria-valuenow"));
        $(this).css("width", "0px").animate({width: finalWidth+"%"}, 1500);
    });
});

答案 1 :(得分:0)

我们可以按value

定位每个.progress-bar

代码:

eq()

我们将宽度设置为百分比。

在html代码中删除$(function () { var prog = $(".progress-bar"); prog.eq(0).animate({width:"50%"}, 1500) prog.eq(1).animate({width:"70%"}, 1500) prog.eq(2).animate({width:"85%"}, 1500) }); 值,我们将其在css中设置为0,以便我们可以正确设置动画。

的CSS:

width

here是工作示例。