16

私は jQuery animate 関数に精通しており、さまざまなjQuery UI イージング関数も経験しました。残念ながら、私が探しているのと同じアニメーション効果として表示されるものはありません。独自のイージング関数を作成することは可能ですか?

私が試みているアニメーションは、動的に読み込まれた製品ウィジェットが上部にあるApple Mac Web ページで見ることができます。最初のアイテムは上から滑り込み、着地後に跳ね返るように見えます。カスタム jQuery コードを使用して、このイージング スタイルを再作成することは可能ですか? または、独自のサードパーティの簡単な機能を構築することはできますか?

私が話していることの画面を含めました。うまくいけば、誰かが解決策を提供できます。前もって感謝します ：）

Mac アニメーション メニュー

ハイライトされたグラフィック

4

1 に答える 1

23

ここで私のデモを見てください

主なアイデアは、easyOutCubic効果を使用して 2 つの連続したアニメーションを実行することです。

HTML:

<div class='left'></div>
<div class='center'></div>
<div class='right'></div>

JS:

$('div.left').animate({top: 410, left: 10}, 300, "easeOutCubic", function(){
    $('div.left').animate({top: 400, left: 20}, 300, "easeOutCubic");
});

$('div.center').animate({top: 420}, 300, "easeOutCubic", function(){
    $('div.center').animate({top: 400}, 300, "easeOutCubic");
});

$('div.right').animate({top: 410, right: 10}, 300, "easeOutCubic", function(){
    $('div.right').animate({top: 400, right: 20}, 300, "easeOutCubic");
});
于 2013-01-28T04:45:08.400 に答える