模拟与jQuery Windows 8的活的瓷砖动画。如何快速启动动画然后结束慢？ [英] Emulating Windows 8 Live Tiles animation with jQuery. How to start animation fast then end slow?

问题描述

我有我已经找到了一种方法使用jQuery的动画更新（增加两个内容的div）这个平铺。但有一个问题，我希望动画开始快速再结慢，就像在Windows 8中我试图jQuery和jQuery用户界面插件缓和/方法，但没有人似乎工作。

I have this "tile" which I have found a way to update (add two content divs) using jQuery animations. But one problem, I want the animation to start fast then end slow, like in Windows 8. I have tried jQuery and jQuery UI easing plugins/methods, but none of them seem to be working.

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

Here is a fiddle of my current project: http://jsfiddle.net/ModernDesigner/9r2gw/

所以基本上，我有一个DIV裁剪，用两个相同大小的div。然后它的jQuery动画到顶部的div向上滑动淡出人们的视线，底部DIV滑入到位。然后滑回原位，重复。 （我要补充直列code，以使在这里发表的问题）：

So basically, I have a cropping div, with two same size divs. Then jQuery animates it to where the top div slides up out of sight, and the bottom div slides into place. Then it slides back down, and repeats. (I have to add inline code in order to post the question so here):

<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的缓解方法使用动画，请告诉我，但据我所知，没有什么我试过的工作。

If I can be using easing methods for jQuery UI using animation, please tell me, but as far as I know, nothing I've tried is working.

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

If there is a different method I should be using, can somebody put me on the right track?

推荐答案

我不熟悉的Windows 8动画的速度和类型，但你没有使用任何的缓和方程。我已经更新了自己的的jsfiddle 使用 easeInOutQuint 缓动方程。还有href=\"http://jqueryui.com/resources/demos/effect/easing.html\" rel=\"nofollow\">良好的演示显示了通过jQuery UI的各种可用的宽松政策选项一个

I'm unfamiliar with the speed and type of the Windows 8 animation, but you weren't using any of the easing equations. I've updated your jsFiddle to use the easeInOutQuint easing equation. There's also a good demo showing the various easing options available through jQuery UI.

这篇关于模拟与jQuery Windows 8的活的瓷砖动画。如何快速启动动画然后结束慢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！