1

jQueryアニメーションを使用して更新（2つのコンテンツdivを追加）する方法を見つけたこの「タイル」があります。しかし、問題の1つは、Windows 8のように、アニメーションを速く開始してから遅く終了させたいことです。jQueryとjQuery UIのイージングプラグイン/メソッドを試しましたが、どれも機能していないようです。

これが私の現在のプロジェクトのフィドルです：http：//jsfiddle.net/ModernDesigner/9r2gw/

つまり、基本的に、2つの同じサイズの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;
}

アニメーションを使用してjQueryUIのイージングメソッドを使用できる場合は、教えてください。ただし、私が知る限り、試したことは何も機能していません。

私が使用すべき別の方法がある場合、誰かが私を正しい軌道に乗せることができますか？

4

2 に答える 2

0

私はWindows8アニメーションの速度と種類に慣れていませんが、イージング方程式を使用していませんでした。イージング方程式を使用するようにjsFiddleを更新しました。jQueryUIで利用できるさまざまなイージングオプションを示す優れたデモeaseInOutQuintもあります。

于 2012-12-24T00:27:18.487 に答える
0

イージング方法はたくさんあります！jQueryUIドキュメントでさまざまなイージングを見つけることができます。

于 2012-12-24T00:27:36.457 に答える