Как оживить две вещи одновременно в jQuery

Question

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

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

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

Answer 1

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

$("#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() анимировать один путь, когда парящий и анимировать их назад при выходе. .stop() предназначен только для предотвращения наращивания очереди анимации. Чтобы оживить цвет, вам понадобится либо the color plugin, либо jQuery UI.

анимаций в JQuery, .animate(), are implemented с помощью setInterval() с 13 мс таймер, так что они будут происходить за пределами нормального потока ... делает их, как выше, не ждать первого закончить, они будут работать одновременно.

Answer 2

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

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

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

Answer 3

Отъезд jQuery.animate() docs. Существует queue свойства:

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

Answer 4

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

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

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

Дальнейшие анимации могут быть добавлены в очередь «триггер-зависания» и все они могут быть инициированы при условии, что последний анимации Dequeue они.

Приветствия, Энтони