[英]Make javascript animated bar synchronously to animated percentage
The problem I faced is I can't figure out how to make the animated bar synchronously to the percentage I. Right now I looks OKE but when I change the value '43' to '100' the percentage counter goes to slow. 我遇到的问题是我无法弄清楚如何使动画条同步到百分比I.现在我看起来很好但是当我将值'43'更改为'100'时,百分比计数器变慢。
example code: 示例代码:
$(document).ready(function(){
$(".barInner").animate({
width: 43 + "%",
opacity: 1
}, 2500 );
var display = $('.barInner');
var currentValue = 0;
var nextValue = 43;
var diff = nextValue - currentValue;
var step = ( 0 < diff ? 1 : -1 );
for (var i = 0; i < Math.abs(diff); ++i) {
setTimeout(function() {
currentValue += step
display.text(currentValue + "%");
}, 54 * i)
}
});
http://jsfiddle.net/vTKw7/ http://jsfiddle.net/vTKw7/
Thanks in advance, 提前致谢,
Nick 缺口
You can't synchronize an .animate()
and a setTimeout()
the way you seem to want. 您无法以您希望的方式同步.animate()
和setTimeout()
。 Try using your setTimeout
to control the width of the progress bar and display the percentage number at the same time. 尝试使用setTimeout
控制进度条的宽度并同时显示百分比数字。
$(document).ready(function () {
var display = $('.barInner');
var currentValue = 0;
var nextValue = 100;
var diff = nextValue - currentValue;
var step = (0 < diff ? 1 : -1);
for (var i = 0; i < Math.abs(diff); ++i) {
setTimeout(function () {
currentValue += step;
display.text(currentValue + "%");
$(".barInner").css({
width: currentValue + "%",
opacity: 1
});
}, 54 * i)
}
});
http://jsfiddle.net/mblase75/6TMWm/ http://jsfiddle.net/mblase75/6TMWm/
Or, using .stop().animate()
to smooth it out a little: 或者,使用.stop().animate()
将其平滑一点:
$(".barInner").stop().animate({
width: currentValue + "%",
opacity: 1
},50);
http://jsfiddle.net/mblase75/6TMWm/1/ http://jsfiddle.net/mblase75/6TMWm/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.