模拟与jQuery Windows 8的活的瓷砖动画。如何快速启动动画然后结束慢？(Emula

2019-10-17 13:11发布

我有我已经找到一种方法使用jQuery的动画更新（增加两个内容的div）这个“砖”。但有一个问题，我希望动画开始快速再结慢，就像在Windows 8.我已经试过jQuery和jQuery UI的宽松插件/方法，但他们都不是工作。

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

所以基本上，我有一个裁剪格，有两个同样大小的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缓动方程。还有一个，显示出不同宽松选项良好的演示可以通过jQuery UI的。

Answer 2:

有很多缓解方法！你可以在不同的渐变效果jQuery UI的文档。