Как вы одновременно увлекаетесь и анимируете?

Question

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

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

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

Так или иначе:

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

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

jquery effects jquery-animate fadein

51

JayNCoke 31 Окт 2009 в 01:05

Answer 1

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

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

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

72

Tinister 31 Окт 2009 в 01:34

26

+1. Однако $('.tooltip').show() - лучшая альтернатива $('.tooltip').css('display', 'block');.

–

Noldorin

31 Окт 2009 в 01:35

4

А как насчет IE {filter:alpha(opacity=50);}? Это тоже заботится об этой опции?

–

Armin Cifuentes

11 Янв 2013 в 00:32

Answer 2

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

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

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

50

SCB 7 Янв 2014 в 16:15

Очередь - мощная опция, особенно при работе с анимационными эффектами, большое спасибо.

–

QMaster

5 Ноя 2016 в 12:28

Answer 3

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

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

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

16

bobince 31 Окт 2009 в 02:31

Как вы одновременно увлекаетесь и анимируете?

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

jquery