[英]Make javascript animated bar synchronously to animated percentage
我遇到的問題是我無法弄清楚如何使動畫條同步到百分比I.現在我看起來很好但是當我將值'43'更改為'100'時,百分比計數器變慢。
示例代碼:
$(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)
}
});
提前致謝,
缺口
您無法以您希望的方式同步.animate()
和setTimeout()
。 嘗試使用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/
或者,使用.stop().animate()
將其平滑一點:
$(".barInner").stop().animate({
width: currentValue + "%",
opacity: 1
},50);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.