1

我有这个“平铺”，我找到了一种使用 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 使用缓动方法，请告诉我，但据我所知，我尝试过的任何方法都不起作用。

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

4

2 回答 2

0

我不熟悉 Windows 8 动画的速度和类型，但您没有使用任何缓动方程。我已经更新了您的jsFiddle以使用easeInOutQuint缓动方程。还有一个很好的演示，展示了通过 jQuery UI 可用的各种缓动选项。

于 2012-12-24T00:27:18.487 回答
0

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

于 2012-12-24T00:27:36.457 回答