1

私はjqueryで（偽の）アニメーションプログレスバーをコーディングしようとしています.animate（）関数を使用しています.これは私のコードです：

$("#progress_bar").animate({width:"100%"},{
                    step: function( now, fx ) {
                    var data =  Math.round(now);
                    $( "#percent" ).html(data+' % ')},duration:8000}//function pourcentages


                ); //animate

問題はパーセンテージに関するもので、バー (0 から 100% の幅に移動する div) よりもはるかに太く、バーが 100% に達する前にカウンターが終了します。誰かがこれを修正するのを手伝ってくれますか?

4

2 に答える 2

1

コードを再現しましたが、正常に動作します。

ここでフィドルを参照してください

アニメーション化するプロパティは 1 つだけですか? そうでない場合は、次のようなものを使用することをお勧めします。

$("#progress_bar").animate({width:"100%"},{
    step: function( now, fx ) {
        if(fx.prop == 'width') { //If you animate more than 1 property
            var data =  Math.round(now);
            $( "#percent" ).html(data+' % ');
        }
    },duration:8000}//function pourcentages 
); //animate

詳細については、同様の投稿を確認してください

于 2013-10-10T13:34:39.007 に答える
0

% で命令を宣言しても、おそらくピクセル単位でアニメーション化されます。

受け取る出力は、特定のポイントでの要素のピクセル単位の幅である可能性が最も高いです。

このようなことを試してください：

$("#progress_bar").animate({width:"100%"},{
    step: function( now, fx ) {
    var max_width = [...];
    var actual_width =  Math.round(now);
    var data_perc = (actual_width / max_width) * 100;

    $( "#percent" ).html(data_perc+' % ')},duration:8000}//function pourcentages


); //animate

[..] をバーの最大幅 (おそらくバー ラッパーの幅) に置き換えます。

元 ：

var max_width = $('#bar_wrapper').width();
于 2013-10-10T12:26:03.710 に答える