Можно ли применить сразу две анимации?

370

12 февраля 2017, 12:18

Конечно можно просто 2 анимации объединить в одну и получить

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

Но есть ли способ заставить 2 анимации воспроизводится одновременно? как это сделать?

  $(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>

Answer 1

Вариант 1: Написать всё в один объект:

$(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>

Вариант 2: Воспроизводить вне очереди:

$(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>