慢下來的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動畫

回答

相關問題