Как применить две анимации к одному и тому же элементу одновременно?

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

};