使用 jQuery 模拟 Windows 8 Live Tiles 动画。如何快速开始动画然后缓慢结束？答案

【问题标题】：Emulating Windows 8 Live Tiles animation with jQuery. How to start animation fast then end slow?使用 jQuery 模拟 Windows 8 Live Tiles 动画。如何快速开始动画然后缓慢结束？
【发布时间】：2012-12-10 13:10:24
【问题描述】：

我有这个“平铺”，我找到了一种使用 jQuery 动画更新（添加两个内容 div）的方法。但是有一个问题，我希望动画快速开始然后缓慢结束，就像在 Windows 8 中一样。我尝试过 jQuery 和 jQuery UI 缓动插件/方法，但它们似乎都不起作用。

这是我当前项目的一个小提琴：http://jsfiddle.net/ModernDesigner/9r2gw/

所以基本上，我有一个裁剪 div，有两个相同大小的 div。然后 jQuery 对其进行动画处理，使其顶部 div 向上滑出视线，而底部 div 滑入到位。然后它滑下来，并重复。（我必须添加内联代码才能在此处发布问题）：

<div class="tile">
    <div class="tile-content">
        <div class="content one">My Content</div>
        <div class="content two">My Content 2</div>
    </div>
</div>

.tile {
    display: block;
    height: 100px;
    width: 200px;
    overflow: hidden;
}

.tile .tile-content {
    height: 100%;
    width: 100%;
}

.tile .tile-content .content.one {
    top: 0;
}

.tile .tile-content .content.two {
    top: 100px;
}

如果我可以使用动画为 jQuery UI 使用缓动方法，请告诉我，但据我所知，我尝试过的任何方法都不起作用。

如果我应该使用不同的方法，有人可以让我走上正确的道路吗？

【问题讨论】：

标签： jquery html css animation windows-8

【解决方案1】：

我不熟悉 Windows 8 动画的速度和类型，但您没有使用任何缓动方程。我已更新您的 jsFiddle 以使用 easeInOutQuint 缓动方程。还有一个 good demo showing the various easing options 可通过 jQuery UI 获得。

【讨论】：

啊。谢谢你。出于某种原因，宽松政策对我不起作用。这可能是语法问题，因为我是 jQuery 新手，而且我对 Windows 8 很着迷。这解决了我的问题。谢谢！
酷 :-p 另外，也可以试试easeInOutCirc 缓动。哦，和speed 变量一起玩……它对一些缓动方程的“外观和感觉”产生了巨大的影响。
但是……还有一个问题。 easeOutCubic 似乎是我想要的。有没有影响开始速度和结束速度？而不是只使用一个普通的数字？还是我必须自己写？如果可以的话。

【解决方案2】：

有很多缓动方法！您可以在jQuery UI Documentation 中找到不同的缓动。

【讨论】：