页面加载时的 Twitter 引导进度条动画 [英] Twitter bootstrap progress bar animation on page load
问题描述
我有一个包含多个引导进度条的页面.设置它们的值最初工作正常.虽然我希望进度条在用户打开页面时动画/过渡到它们的特定状态.
当您单击其中一个栏时,此 JS 工作正常.我需要在酒吧的onload"事件上做类似的事情.但是 "onload" 事件对 s 不可用
//动画进度条$('.progress .bar').on("click", function(event) {var me = $(this);perc = me.attr("数据百分比");me.css('width', perc+'%');});
如何在页面加载时为页面上的所有进度条实现这种行为?
虽然 Tats_innit 的回答很不错,但由于页面上有多个进度条,所以我不得不采取不同的方式.
这是我的解决方案:
JSfiddle:http://jsfiddle.net/vacNJ/
HTML(示例):
<div class="bar" style="float: left; width: 0%; " data-percentage="60"></div><div class="progress progress-success"><div class="bar" style="float: left; width: 0%; " data-percentage="50"></div>
<div class="progress progress-success"><div class="bar" style="float: left; width: 0%; " data-percentage="40"></div>
JavaScript:
setTimeout(function(){$('.progress .bar').each(function() {var me = $(this);var perc = me.attr("数据百分比");var current_perc = 0;var 进度 = setInterval(function() {如果(current_perc>=perc){清除间隔(进度);} 别的 {current_perc +=1;me.css('width', (current_perc)+'%');}me.text((current_perc)+'%');}, 50);});},300);
@Tats_innit:使用 setInterval() 动态重新计算进度是一个不错的解决方案,谢谢伙计!;)
我的一个朋友为自定义 Twitter 引导程序进度条编写了一个很好的 jquery 插件.这是一个演示:http://minddust.github.com/bootstrap-progressbar/
这是 Github 存储库:https://github.com/minddust/bootstrap-progressbar
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.
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?
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.
here's my solution:
JSfiddle: http://jsfiddle.net/vacNJ/
HTML (example):
<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:
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: Using setInterval() to dynamically recalc the progress is a nice solution, thx mate! ;)
EDIT:
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/
Here's the Github repo: https://github.com/minddust/bootstrap-progressbar
这篇关于页面加载时的 Twitter 引导进度条动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!