Question

如何添加＆＃39; easeOutBounce＆＃39;效果这个jquery动画？

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

我不知道在哪里添加代码＆＃39; easeOutBounce＆＃39;没有崩溃。就在持续时间不起作用之前。这是fiddle

Answer 1

你必须在选项对象中传递动画的速度和缓动的类型，并且应该完成你正在寻找的东西。

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

Answer 2

您可以在持续时间和功能备注之间添加一个缓动选项，其中显示的是.animate()的文档：

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

所以你可以这样做：

$next.show().animate({marginTop: 0}, 2000, '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/

加载插件

我在哪里添加缓动到jquery动画？

3 个答案: