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

在这里查看 fiddle 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");
            }
     });
});