Emulating Windows 8 Live Tiles animation with jQue

问题:

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.

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

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;
}

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?

回答1:

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.

回答2:

There are a lot of easing methods! You can find different easings in the jQuery UI Documentation.