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

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

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

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

Делать так или так:

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

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


jquery fadein effects jquery-animate
person JayNCoke    schedule 30.10.2009    source источник

Ответы (3)


arrow_upward
72
arrow_downward 

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

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

$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);
person Tinister    schedule 30.10.2009
comment
+1. Однако $('.tooltip').show() является лучшей альтернативой $('.tooltip').css('display', 'block');. - person Noldorin; 31.10.2009
comment
А как насчет IE {filter:alpha(opacity=50);}? Это заботится и об этой опции? - person Armin Cifuentes; 11.01.2013

arrow_upward
50
arrow_downward

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

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

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

person SCB    schedule 07.01.2014
comment
очередь — это мощная опция, особенно при работе с анимационными эффектами. Большое спасибо. - person QMaster; 05.11.2016

arrow_upward
16
arrow_downward

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

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

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