使javascript动画条同步到动画百分比
使javascript动画条同步到动画百分比
提问于 2013-11-05 14:02:11
我面临的问题是，我不知道如何使动画条与百分比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)
}
});http://jsfiddle.net/vTKw7/
提前谢谢你，
尼克
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-05 14:10:54
您不能以您似乎想要的方式同步.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);http://jsfiddle.net/mblase75/6TMWm/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19790814
复制相关文章
相似问题
腾讯云开发者
