как оживить две вещи одновременно в 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() только для предотвращения наращивания очереди анимации. Чтобы анимировать цвет, вам понадобится плагин цвета или jQuery UI .

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

Answer 2

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

Итак, чтобы сделать две вещи одновременно:

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

Answer 3

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

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

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

Answer 4

Извлечение jQuery.animate () docs . Есть queue свойство:

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