javascript - 减慢jquery动画

Question

我有一个动画，我一直试图放慢速度，但到目前为止我一直没有成功，我尝试了持续时间并在最后添加时间，但动画似乎以相同的速度运行。

任何帮助都会很棒。

$("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/

Answer 1

您只需将动画的持续时间参数设置为选项对象的第二个参数的一部分。jQuery.animate()有多种形式。您使用的表单需要两个对象，第二个对象可以包含duration作为第二个参数的属性，就像我在这里展示的那样：

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

Answer 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");
         }
    });
 });

您更新的 jsfiddle 代码 >> http://jsfiddle.net/8jXDK/4/

Answer 3

演示：http: //jsfiddle.net/8jXDK/3/

只需将持续时间移动到适当的位置即可解决此问题。

JS：

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

Answer 4

似乎动画功能具有预设的快/慢持续时间，分别为 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);

Answer 5

将持续时间属性添加到第二个对象参数。

$("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");
         },
         duration: 10000
        });
});