让动画变慢（jQuery）答案

【问题标题】：Make animation slower (jQuery)让动画变慢（jQuery）
【发布时间】：2011-10-17 17:12:13
【问题描述】：

我正在尝试通过更改其position 来制作该块的动画。

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

问题是，动画过程从头到尾以相同的速度发生。

我想让动画在结束时变慢，到终点时它应该变慢。

我该怎么做？我已经阅读了有关 easing 插件的信息，但不知道我应该使用哪种效果，这是想要的。

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

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

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

编辑：

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

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

【讨论】：

很好的找到 jquery easing 演示页面。

【解决方案2】：

这是一个很棒的参考，可以让缓动效果发挥作用：http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html。是的，我知道这是针对 actionscript 库 Tweener 但所有缓动名称都是相同的（大部分情况下）。

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

【讨论】：

【解决方案3】：

试试这样的：

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

【讨论】：

【解决方案4】：

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

【讨论】：

可以解释一下。