2

速度を落とそうとしているアニメーションがありますが、これまでのところ成功していません。持続時間と最後に時間を追加しようとしましたが、アニメーションは同じ速度で実行されているようです。

どんな助けでも素晴らしいでしょう。

$("document").ready(function(){
    // Change the width of the div
    var i = 0;
    $(".progress-bar span").animate({
        width: "100%"
        },
        {step: function(){
        //console.log( "width: ", i++ );
        console.log($(this).width());
        },
         complete : function(){
             console.log("finished");
         }
        },2000);
});

ここでフィドルを参照してくださいhttp://jsfiddle.net/Jrand/8jXDK/2/

4

5 に答える 5

4

options オブジェクトである 2 番目の引数の一部として、アニメーションの期間引数を設定する必要があるだけです。jQuery.animate()にはいくつかの形式があります。使用しているフォームは 2 つのオブジェクトを取り、2 番目のオブジェクトには、durationここに示すように、2 番目の引数のプロパティとしてを含めることができます。

$("document").ready(function(){
    // Change the width of the div
    var i = 0;
    $(".progress-bar span").animate({
        width: "100%"
        },
        {
            duration: 5000,
            step: function() {
                //console.log( "width: ", i++ );
                console.log($(this).width());
            },
            complete: function() {
                 console.log("finished");
            }
     });
});
于 2013-06-04T07:17:56.830 に答える
1

アニメート機能には、それぞれ200ミリ秒と400ミリ秒の高速/低速のプリセット期間があるようです。私は次のように回避策をハックしました...

var progress = 100; //or the maximum range where your progress bar stops...
var progress_speed = 1000; //varying this number will determine how fast or how slow progress bar goes...
var counter = 0;            
var width_animate_b = setInterval(function() {              
    if(counter < progress) {                    
         counter++;
         $(".progress-bar").attr('aria-valuenow', counter);
         $(".progress-bar").css('width', counter + "%");
         $(".progress-bar").prop('Counter', counter);
         $(".progress-bar").text(counter + '%');
    } else {                        
         clearInterval(width_animate_b)
    }
}, progress_speed);
于 2020-09-04T09:57:19.607 に答える