Of course, you can simply combine 2 animations into one and get

$('div').animate({ backgroundColor:'black', height: 0 });

But is there a way to force 2 animations to play simultaneously? how to do it?

  $(document).ready(function(){ $('div').animate({ backgroundColor:'black', }); $('div').animate({ height:0 }); }); 
 *{ margin:0; padding:0; } div{ width: 60px; height: 250px; background: red; } 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div></div>

  • I think it is possible :). - Rostislav Dugin
  • At the moment, first there is a change in the background and only then decreases the height. - PeGaS

1 answer 1

Option 1 : Write everything in one object:

 $(document).ready(function() { $('div').animate({ backgroundColor: 'black', height: 0 }, 2000); }); 
 * { margin: 0; padding: 0; } div { width: 60px; height: 250px; background: red; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div></div>

Option 2 : Play out of turn:

 $(document).ready(function() { $('div').animate({ backgroundColor: 'black' }, { duration: 2000, queue: false // Переменная, которая обозначает, что анимация должная запускаться без очереди }); $('div').animate({ height: 0 }, { duration: 2000, queue: false }); }); 
 * { margin: 0; padding: 0; } div { width: 60px; height: 250px; background: red; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div></div>

  • Just for example: someone made an animation, and I want to apply it to my already existing one, so that they play back together at the same time. You can of course insert the code of the animation in your own, but is it possible without it? But just play them together? - PeGaS
  • one
    @PeGaS, added the second option - Yuri
  • That's perfect, thanks! - PeGaS
  • @PeGaS, not at all :) - Yuri
  • one
    @PeGaS, the second animation brings down the first one: jsfiddle.net/yuri_spivak/jz11xock/4 - Yuri