我在哪裏添加緩動jquery動畫？

Question

如何爲此jquery動畫添加'easeOutBounce'效果？

$next.show().animate({marginTop: 0}, 2000, function() { 
     $this.hide().css("z-index","0"); 
}); 

我不知道在哪裏沒有崩潰它添加代碼「easeOutBounce」。持續時間不起作用。這裏的fiddle

Answer 1

您可以添加您的時間和功能音符之間的寬鬆選項是.animate()文檔它表明：

.animate(properties [, duration ] [, easing ] [, complete ]) 

所以，你可以這樣做：

$next.show().animate({marginTop: 0}, 2000, 'easeOutBounce', function() { 
    $this.hide().css("z-index","0"); 
}); 

Answer 2

你必須在選項對象中傳遞動畫的速度和緩動的類型，並且應該完成你正在尋找的東西。

$next.show().animate({marginTop: 0}, { 
    duration: 2000, 
    easing: 'easeOutBounce' 
    }, function() { 
    $this.hide().css("z-index","0"); 
}); 

Answer 3

你需要用成這樣的對象：

$next.show().animate(
    {marginTop: 0}, 
    { 
     duration: 2000, 
     specialEasing: { 
      marginTop: "linear" 
     }, 
     complete: function() { 
      $this.hide().css("z-index","0"); 
     } 
    } 
); 

https://jsfiddle.net/3xcu3urk/10/

此外，您還需要加載插件的easeOutBounce http://api.jqueryui.com/easings/