Конечно можно просто 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>
Вариант 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>
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Как сделать так, чтобы этот скрипт начинал работать только тогда, когда пользователь докрутил скролл до его местоположения?
Всем привет! Пытаюсь использовать jQuery AJAX для моих целей, но столкнулся с проблемой:
Добрый день! Разбираясь в Angular 2 потребовалось вывести список элементов на экран пользователя