如何设置动画的持续时间和缓动属性（）

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