Можно ли одновременно запускать две анимации на двух разных элементах? Мне нужно обратное этому вопросу анимации очередей JQuery.
Мне нужно сделать что-то вроде этого...
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
но для запуска этих двух одновременно. Единственное, что я мог подумать, будет использовать setTimeout
один раз для каждой анимации, но я не думаю, что это лучшее решение.
Ответ 1
да есть!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
Ответ 2
Это будет работать одновременно да.
что если вы хотите одновременно запускать две анимации на одном элементе?
$(function () {
$('#first').animate({ width: '200px' }, 200);
$('#first').animate({ marginTop: '50px' }, 200);
});
Это заканчивает очередь в анимации.
чтобы запустить их одновременно, вы должны использовать только одну строку.
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
Есть ли другой способ одновременного запуска двух разных анимаций одного и того же элемента?
Ответ 3
Если вы запустили выше, как они есть, они будут работать одновременно.
Вот несколько тестовых кодов:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>
Ответ 4
Я считаю, что нашел решение в документации jQuery:
Анимирует весь абзац в левом стиле из 50 и непрозрачность 1 (непрозрачный, видимый), завершение анимации в течение 500 миллисекунд. Он также будет сделайте это за пределами очереди, что означает будет автоматически запускаться без ожидая своей очереди.
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
просто добавьте: queue: false
.
Ответ 5
Посмотрите на это блестящее сообщение в блоге об анимации ценностей в объектах. Затем вы можете использовать значения для анимации, как вам нравится, на 100% одновременно.
http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/
Я использовал его так, чтобы вставлять/выходить:
slide : function(id, prop, from, to) {
if (from < to) {
// Sliding out
var fromvals = { add: from, subtract: 0 };
var tovals = { add: to, subtract: 0 };
} else {
// Sliding back in
var fromvals = { add: from, subtract: to };
var tovals = { add: from, subtract: from };
}
$(fromvals).animate(tovals, {
duration: 200,
easing: 'swing', // can be anything
step: function () { // called on every step
// Slide using the entire -ms-grid-columns setting
$(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
}
});
}
Ответ 6
Хотя верно, что последовательные вызовы анимации дадут внешний вид, они работают одновременно, основная истина заключается в том, что они представляют собой различные анимации, которые работают очень близко к параллели.
Чтобы гарантировать, что анимация действительно работает в то же время, используйте:
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation');
});
Дальнейшие анимации могут быть добавлены в очередь "my-animation", и все они могут быть инициированы, если последняя анимация отменяет их.
Cheers,
Энтони
Ответ 7
Разместив свой ответ, чтобы помочь кому-то, ответ с самым высоким рейтингом не решил мою проблему.
Когда я реализовал следующее [из верхнего ответа], моя анимация вертикальной прокрутки просто дрожала взад-вперед:
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
Я упомянул: W3 Schools Set Interval, и это решило мою проблему, а именно раздел "Синтаксис":
setInterval(function, milliseconds, param1, param2,...)
Наличие моих параметров формы { duration: 200, queue: false }
вынудило продолжительность ноль, и он только смотрел на параметры для руководства.
Длинный и короткий, вот мой код, если вы хотите понять, почему он работает, прочитайте ссылку или проанализируйте интервал ожидаемых параметров:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
Где 'AutoScroll':
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
Удачного кодирования!