CODEWITHSUNDEEP
jqueryhtmlanimation
Max Ruigewaard
Max Ruigewaard

Reputation: 45

How to apply two animations to the same element simultaneously?

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!

Upvotes: 0

Views: 139

Answers (1)

Holybreath
Holybreath

Reputation: 413

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

};

Upvotes: 1

Related Questions