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

Question

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

这是我当前元素的 fiddle :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 使用缓动方法，请告诉我，但据我所知，我尝试过的任何方法都不起作用。

如果我应该使用其他方法，有人可以让我走上正轨吗？

Answer 1

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