gpt4 book ai didi

javascript - 使javascript动画条与动画百分比同步

转载 作者:行者123 更新时间:2023-12-02 18:09:56 24 4
gpt4 key购买 nike

我面临的问题是我不知道如何使动画栏同步到百分比 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/

提前致谢,

尼克

最佳答案

您无法按照您想要的方式同步 .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/

关于javascript - 使javascript动画条与动画百分比同步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19790814/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com