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.
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)
}
});
Thanks in advance,
Nick
You can't synchronize an .animate()
and a setTimeout()
the way you seem to want. Try using your setTimeout
to control the width of the progress bar and display the percentage number at the same time.
$(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/
Or, using .stop().animate()
to smooth it out a little:
$(".barInner").stop().animate({
width: currentValue + "%",
opacity: 1
},50);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.