6

私は単一の要素のためにキューに入れられたjQueryアニメーションを持っています:

var el = $('.elem');

el.animate({
        width: 120
    },
    600,
    'easeInOutQuint'
).animate({
        width: 90
    },
    300,
    'easeInOutQuint'
).animate({
        width: 100
    },
    100,
    'easeInOutQuint'
);

3 つのアニメーションは、チェーンされた 1 つのメイン アニメーションとしてカウントされます。実行には 1000 ミリ秒かかります。私の例では、最初のアニメーションでイージングの最初の 60% を使用し、次に 2 番目のアニメーションで使用される次の 30% のイージングを使用し、イージングの最後の 10% で終了したいと考えています。

これらのキューされたアニメーションのグローバル値としてイージングを行う方法はありますか?

4

3 に答える 3

7

あなたの質問を正しく理解していれば、ロジックを関数にラップして、期間を渡して、次のように連鎖アニメーションを再利用できるかもしれません。

var el = $('.elem');

var ease = function(elem, duration) {
    elem
    .animate({width: 120}, 0.6 * duration, 'easeInOutQuint')
    .animate({width:  90}, 0.3 * duration, 'easeInOutQuint')
    .animate({width: 100}, 0.1 * duration, 'easeInOutQuint');
}

ease(el, 1000);
于 2013-08-10T15:13:47.913 に答える