1

どんどん遅くなる読み込みバーを作成しようとしています。追加された幅の各ビットが段階的に小さくなるようにしましたが、今は間隔値にも同じことをしたいと考えています。現在、私の変数「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);
4

3 に答える 3

3

間隔が設定されると、それを変更することはできません。代わりにタイムアウトと再帰を使用してください:

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);
}
于 2013-10-01T21:58:41.243 に答える
1

jQueryを使用しているので、イージング関数を使用したい場合があります。具体的easeOutExpoには、ユースケースに適合する場合があります。

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

必要に応じて、カスタム イージング関数を提供できます

于 2013-10-01T22:36:35.673 に答える
0

タイマーを繰り返し設定する必要のない別の方法を次に示します。

$(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);
});

フィドルの例

于 2013-10-01T23:45:31.440 に答える