具有常见缓动的jQuery动画队列

Question

我有jQuery动画,排队等候一个元素:

var el = $('.elem');

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

3动画算作1个主动画,只是链接.运行需要1000毫秒,我想在我的例子中使用第一个动画的前60%的缓动,然后在第二个动画中使用缓和的下一个30%,它完成了最后10%的缓动.

有没有办法让缓和作为这些排队动画的全局值？

Answer 1

如果我正确理解你的问题,也许你可以将逻辑包装在一个函数中,这样你就可以传入持续时间并重用链式动画,如下所示:

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