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

Question

I'm trying to apply two animations with different easings simultaneously to the same element but I can't get it to work. This is what I tried:

    $(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;
        };
    });

Thanks in advance!

Answer 1

You can add more than one property change parameter into animation object.

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

};