使动画变慢（jQuery）

Question

我想通过改变 position 来制作块的动画。

比如，通过 css 的 left 动画将块从左侧移动到中间。

问题是，动画过程从开始到结束都以相同的速度进行。

我想在最后放慢动画速度，当它接近终点时减缓速度。

我该怎么做？我已经了解了缓动插件，但不知道应该使用哪种效果才是所需的。

- Jasper

Answer 1

您想要一个缓出效果。以下是一些演示：

http://jquery-ui.googlecode.com/svn/tags/1.6rc6/demos/effects_easings/default.html

编辑：

这里是更“官方”的演示页面：

http://jqueryui.com/demos/effect/easing.html

- bjudson

---

jQuery缓动演示页面的发现不错。 - locrizak

Answer 2

这是一个很棒的参考资料，有关缓动效果的行为: http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html。是的，我知道这是针对actionscript库Tweener，但所有缓动名称都是相同的（在大多数情况下）。

您正在寻找easeOut或easeOutQuad或easeOutCubic。（它们按开始减速的速度顺序排列）

- locrizak

Answer 3

尝试类似于这样的代码：

$('#yourBlock').animate({
    left: newValue
}, 500, 'easeOut')

- Simon Arnold

Answer 4

$(document).ready(function () {
    $("#imgAnimate").click(function () {
        $("#imgAnimate").animate({ "opacity": 0.0, left: '800px' }, 2500);
    });
});

- Nirav and Mansi

---

可能需要一些解释。 - Raidri