页面加载时Twitter引导进度条动画 [英] Twitter bootstrap progress bar animation on page load

问题描述

我有一个包含多个bootstrap进度条的页面。最初设置它们的值工作正常。虽然我想在用户打开页面时让进度条动画/转换到其特定状态。

I have a page with several bootstrap progress bars. Setting their values initially works fine. Though I would like the progress bars to animate/transition to their specific states when a user opens the page.

当你点击其中一个栏时，这个JS工作正常。我会在酒吧的onload事件中需要类似的东西。但是onload事件不适用于s

This JS works fine, when you click on one of the bars. I would need something like that on an "onload" event of the bar. But the "onload" event is not available for s

//animate progress bars
$('.progress .bar').on("click", function(event) {
  var me = $(this);
  perc = me.attr("data-percentage");
  me.css('width', perc+'%');
});

如何在页面加载时为页面上的所有进度条实现此行为？

How can I achieve this behavior on page load for all progress bars on a page?

推荐答案

虽然Tats_innit的答案很有吸引力，但由于我在页面上有多个进度条，因此我不得不这样做。 。

While Tats_innit's answer has a nice touch to it, I had to do it a bit differently since I have more than one progress bar on the page.

这是我的解决方案：

JSfiddle： http://jsfiddle.net/vacNJ/

JSfiddle: http://jsfiddle.net/vacNJ/

HTML（示例）：

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="60"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="50"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="40"></div>
</div>

JavaScript：

JavaScript:

setTimeout(function(){

    $('.progress .bar').each(function() {
        var me = $(this);
        var perc = me.attr("data-percentage");

        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            me.text((current_perc)+'%');

        }, 50);

    });

},300);

@Tats_innit：使用setInterval（）动态重新计算进度是一个不错的解决方案，他们的伙计！ ;）

@Tats_innit: Using setInterval() to dynamically recalc the progress is a nice solution, thx mate! ;)

编辑：

我的一位朋友写了一个不错的jquery插件用于自定义twitter bootstrap进度条。
这是一个演示：
http://minddust.github.com/bootstrap- progressbar /

A friend of mine wrote a nice jquery plugin for custom twitter bootstrap progress bars. Here's a demo: http://minddust.github.com/bootstrap-progressbar/

这是Github回购：
https://github.com/minddust/bootstrap-progressbar

Here's the Github repo: https://github.com/minddust/bootstrap-progressbar

这篇关于页面加载时Twitter引导进度条动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！