慢下来的jQuery动画

我有一个动画，我一直在试图减慢，但到目前为止，我一直unsucsessful我试过持续时间，并在最后添加时间，但动画似乎运行在相同的速度。慢下来的jQuery动画

任何帮助将是伟大的。

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

来源

2013-06-04 James Rand

拨弄你只需要设置动画的持续时间参数作为它的选项对象中的第二个参数的一部分。 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"); 
      } 
    }); 
});

来源

2013-06-04 07:17:56 jfriend00

这不是一个真正的评论吗？ –

啊，你去了。给你，我发布了评论，然后再更新答案！ –

@harsha - 包括代码。 – jfriend00

试试这个，

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

来源

2013-06-04 07:21:51 amrinder007

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

来源

2013-06-04 07:23:34 abc123

添加的持续时间属性的第二对象参数。

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

来源

2013-06-04 07:25:17

慢下来的jQuery动画

回答

相关问题