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

试试这个，

$("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代码＆gt;＆gt; http://jsfiddle.net/8jXDK/4/

Answer 2

您只需要将动画的持续时间参数设置为第二个参数（选项对象）的一部分。 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 3

DEMO：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

似乎动画功能具有预设的快/慢持续时间，分别为200ms和400ms。我确实修改了以下内容...

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

减慢jquery动画

5 个答案: