Как установить длительность и ослабление свойств для анимации()

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