как анимировать две вещи одновременно в jquery

Я хочу анимировать 2 вещи одновременно, когда мышь что-то парит.

например, я хочу изменить цвет фона box1 с id = "box1"и положение box2 с id=" box2", когда мышь наводит div с id="триггер".

но я не хочу, чтобы они анимировались в очереди, то есть один за другим. Я хочу, чтобы они начали анимацию одновременно и закончили одновременно!

8
jquery jquery-animate jquery-ui

4 ответов

вы можете просто запустить их подряд, например:

$("#trigger").hover(function() {
   $("#box1").stop().animate({ backgroundColor: '#000000' });
   $("#box2").stop().animate({ top: "-20px" });
}, function() {
   $("#box1").stop().animate({ backgroundColor: '#FFFFFF' }); //set it back
   $("#box2").stop().animate({ top: "0px" });                 //set it back
});

использует .hover() для анимации в одну сторону при зависании и анимации их назад при выезде. The .stop() просто для предотвращения создания очереди анимации. Чтобы оживить цвет, вам понадобится либо цвета плагин или jQuery UI включены также.

анимация в jquery,.animate(), несколько реализовано используя setInterval() с таймером 13ms, поэтому они будут происходить вне нормального потока...выполнение их, как указано выше, не ждет первого, чтобы закончить, они будут работать одновременно.

16

когда начинается первая анимация, следующая строка кода выполняется, не дожидаясь завершения анимации.

так, чтобы сделать две вещи сразу:

$('#trigger').hover(function()
{
    $('#box1').animate({ ... });
    $('#box2').animate({ ... });
});
4

проверить С помощью jQuery.animate () docs. Есть queue свойства:

queue: логическое значение, указывающее, следует ли размещать анимацию в очереди эффектов. Если false анимация начнется сразу же.

3

хотя верно, что последовательные вызовы animate дадут вид, что они работают одновременно, основная истина заключается в том, что они являются различными анимациями, работающими очень близко к параллельным.

для обеспечения анимации действительно работает в то же время использовать:

$('#trigger').hover(function() {
    $('#box1').animate({..., queue: 'trigger-hover'});
    $('#box2').animate({..., queue: 'trigger-hover'}).dequeue('trigger-hover');
});

дальнейшие анимации могут быть добавлены в очередь "триггер-наведение", и все могут быть инициированы при условии, что последняя анимация dequeue их.

Ура, Энтони!--2-->

3