Question

尝试创建速度越来越慢的加载栏。我已经做到了所以增加宽度的每一点都逐渐变小，但现在我想对间隔值做同样的事情。截至目前，我的变量“itime”设置为1000，并且每步都不会减慢。我做错了什么？

var itime = 1000;

var progress = setInterval(function(){

    var insidewidth = $('#inside').width();

    if (insidewidth > 388) {
        $("body").css("background","blue");
        clearInterval(progress);
    }
    else {
        $("#inside").width($("#inside").width() + (175/insidewidth) );
        itime += 1000;
    };


}, itime);

Answer 1

设置间隔后，您无法更改它。请改为使用超时和递归：

var itime = 1000;

function progress(){
    setTimeout(function() {
        var insidewidth = $('#inside').width();

        if (insidewidth > 388) {
            $("body").css("background","blue");
        } else {
            $("#inside").width(insidewidth + (175/insidewidth) );
            itime += 1000;
            progress();
        }

    }, itime);
}

Answer 2

当您使用jQuery时，您可能希望使用easing functions，特别是easeOutExpo可能适合您的用例，例如。

$("#inside").animate({ width: bar_width }, duration:5000, easing: 'easeOutExpo'});

如果需要，您可以提供custom easing function

Answer 3

这是另一种不涉及重复设置计时器的方法：

$(function() {
    var nMax = 99;
    var nWidth = 0;
    var nSpeed = 100;

    var $progressBar = $('.progress-bar div');

    var oInterval = window.setInterval(function() {
        nWidth += (nMax - nWidth) / 100;

        $progressBar.stop().animate({
            width: nWidth + '%'
        }, nSpeed);

        if(Math.round(nWidth) === nMax) window.clearInterval(oInterval);
    }, nSpeed);
});

Fiddle example

逐步减少间隔

3 个答案: