Как вы одновременно затуманиваете и оживляете?

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

Пока у меня есть это:

$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');

Делать это так или иначе:

$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');

Анимация будет запускаться по одному, сначала затухание, а затем вертикальная анимация. Есть ли способ сделать это одновременно?

Ответ 1

$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');

Однако, похоже, что это не работает с элементами display: none (как это делает fadeIn). Таким образом, вам может потребоваться сделать это заранее:

$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);

Ответ 2

Для людей, которые все еще смотрят пару лет спустя, все немного изменилось. Теперь вы можете использовать queue для .fadeIn(), чтобы он работал следующим образом:

$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');

Это полезно для работы с элементами display: none, поэтому вам не нужны дополнительные две строки кода.

Ответ 3

Другой способ сделать одновременную анимацию, если вы хотите вызвать их отдельно (например, из другого кода), - это использовать queue. Опять же, как и в случае с Tinister, вам придется использовать анимацию для этого, а не fadeIn:

$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...

$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');