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

Make javascript animated bar synchronously to animated percentage

本文关键字：动画 百分比 同步 javascript      更新时间：2023-09-26

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

相关文章：