如何同时将两个动画应用于同一个元素？

Question

我正在尝试将具有不同缓动的两个动画同时应用于同一元素，但我无法使其工作。这就是我试过的：

    $(window).load(function() {

        var speed = 1500;
        var delay = 0;

        for(var i = 0 + 1; i <= $('.skills li').length; i++) {

            var li = $('.skills li:nth-child(' + (i + 1) + ')');

            li.delay(delay).animate({
                left: "0"
            },{ 
                duration: speed, 
                queue: false,
                easing: 'easeOutBounce'
            });
            li.delay(delay).animate({
                opacity: 1
            },{
                duration: speed, 
                queue: false,
                easing: 'easeOut'
            });

            delay += 150;
        };
    });

提前致谢！

Answer 1

您可以在动画对象中添加多个属性更改参数。

for (var i = 0; i <= $('.skills li').length; i++) {

    var li = $('.skills li:nth-child(' + (i + 1) + ')');
    li.stop(true, true).delay(i * 150).animate({
        left: "0", 
        opacity: 1
    }, {
        duration: speed,
        queue: true, //do you want one-by-one or all together , please specify?
        specialEasing: {
          width: "linear",
          height: "easeOutBounce"
        }
    });

};