2

私は7秒で0から100％の幅にならなければならない単純なプログレスバーを持っています。操作の処理に問題はありません。7秒の長さが必要です。

コードは実際にはとても単純です：

$('.progress-bar').animate({width:'100%'}, 7000);

プログレスの幅は0％なので、100％にアニメートする必要があります。私の問題は、進行状況（7秒以内）の場合と同じ方法でパーセンテージを表示するために、0から100までカウントする必要があることです。

どうすればいいですか？

ありがとうございました！

4

4 に答える 4

7

http://jsfiddle.net/C23YM/9/

基本的に、関数をオプションに渡し、呼び出しstepごとに、たとえば2つのプロパティがアニメーション化されている可能性があるため、アニメーション化されているものかどうかを確認します。stepwidth

ドキュメントから：

step関数は、各アニメーション要素のアニメーションプロパティごとに呼び出されることに注意してください。たとえば、2つのリスト項目がある場合、ステップ関数はアニメーションの各ステップで4回起動します。

$('.progress-bar').animate(
    {width:'100%'}, 
    {
        duration:7000,
        step: function(now, fx) {
           if(fx.prop == 'width') {
               $(this).html(Math.round(now * 100) / 100 + '%');
           }
        }
    }        
);​
于 2012-04-25T09:52:40.773 に答える
1

そんな感じ？

var starttime = (new Date()).getTime();

function updateTime() {
    var timediffPerc = ((new Date()).getTime() - starttime) / 70000;
    $('#percentage').text(timediffPerc.toFixed(2) + "%");
    if(timediffPerc<100) window.setTimeout(updateTime, 100);
}

パーセンテージが表示されるid="percentage"のHTML要素が必要です。

于 2012-04-25T09:46:03.920 に答える
1

アニメーションの「from」「to」ロジックを使用できます。

var _start = {property: 0};
var _end = {property: 100};

jQuery(_start).animate(_end, {
    duration: 7000,
    step: function() {
    $('.progress-bar').css('width', this.property + "%");        
    //console.log( 'Current percentage is ' + this.property );// You can write this to your bar

    }
});

ここで参照できます

そのページで「ステップ」のように検索できます

于 2012-04-25T09:46:45.627 に答える
1

アニメーションのドキュメントhttp://api.jquery.com/animate/を見ると、使用できるstepメソッドがあり、アニメーションのすべてのステップで呼び出されます。

.animate（）の2番目のバージョンは、ステップオプションを提供します。これは、アニメーションの各ステップで起動されるコールバック関数です。この関数は、カスタムアニメーションタイプを有効にしたり、アニメーションの発生時にアニメーションを変更したりする場合に便利です。2つの引数（nowとfx）を受け入れ、これはアニメーション化されるDOM要素に設定されます。

現在：各ステップでアニメーション化されているプロパティの数値fx：アニメーション化された要素のelem、アニメーション化された要素の最初と最後の値の開始と終了など、いくつかのプロパティを含むjQuery.fxプロトタイプオブジェクトへの参照それぞれアニメーション化されたプロパティ、およびアニメーション化されているプロパティの小道具。

したがって、これを使用して現在の幅の値をパーセントで取得できます。要素の幅と完全に一致する値を取得する必要があります（たとえば、70％の場合は70を取得します）

于 2012-04-25T09:46:52.087 に答える