如何設置動畫的持續時間和緩動屬性（）

Question

下面是我的代碼。它運作良好，但我不知道如何增加持續時間並將其緩解。另外我想添加一個回調函數。

$(".pcs").animate({ 
     top:height/2-50, 
     left:width/2-50, 
     width:100, 
     opacity:1, 
    },{step: function(now,fx){ 
      $(".pcs").css('-webkit-transform','rotate(' + now + 'deg)'); 
     }}); 

Answer 1

Jquery的動畫功能就像這樣：

element.animate(properties, options); 

你可以這樣做：

$(".pcs").animate({ 
    top:height/2-50, 
    left:width/2-50, 
    width:100, 
    opacity:1},{ 
     duration: 1000,/*A string or number determining how long the animation will run. (1000 = 1 second)*/ 
     easing: "linear",/*A string indicating which easing function to use for the transition.*/ 
     step: function(now,fx){ 
      $(".pcs").css('-webkit-transform','rotate(' + now + 'deg)'); 
     }, 
     complete: function() { 
      // Animation complete. 
     } 
    } 
); 

要了解更多的細節，你可以看看

Answer 2

.animate（屬性[，時間] [，緩和] [，完整]）

所以你可以使用

  $(".pcs").animate({ 
        top:height/2-50, 
        left:width/2-50, 
        width:100, 
        opacity:1, 
       },{step: function(now,fx){ 
         $(".pcs").css('-webkit-transform','rotate(' + now + 'deg)'); 
        , 
        duration: 200,// or any numeric value 
        easing: 'linear' // or any supported easing effect, for more easing effect you can used jquery ui 
        }}); 

檢查有關jquery ui緩解作用

Answer 3

$(".pcs").animate({ 
     top:height/2-50, 
     left:width/2-50, 
     width:100, 
     opacity:1, 
    }, { 
     step:function(now,fx){ 
     $(".pcs").css('-webkit-transform','rotate(' + now + 'deg)'); 
     }, 
     duration: /*int*/, 
     easing: /*string*/, 
     complete: /*function when animation is complete*/ 
    });