Как вы увядаете и оживляете одновременно?
-
22-07-2019 - |
Вопрос
Используя jQuery, я создаю базовую анимацию «всплывающей подсказки», чтобы подсказка появлялась в виде небольшой анимации, в которой она исчезала, а также двигалась вертикально.
Пока у меня есть это:
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');
Делать это так или иначе:
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');
Анимации будут запускаться по одной, сначала постепенно, а затем по вертикали. Есть ли способ сделать это одновременно?
Решение
$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');
Однако это не работает для элементов display: none
(как это делает fadeIn
). Таким образом, вам может потребоваться указать это заранее:
$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);
Другие советы
Для людей, которые все еще ищут пару лет спустя, вещи немного изменились. Теперь вы также можете использовать очередь
для .fadeIn ()
, чтобы он работал следующим образом:
$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
Это дает преимущество работы с элементами display: none
, поэтому вам не нужны дополнительные две строки кода.
Другой способ сделать одновременные анимации, если вы хотите вызывать их отдельно (например, из другого кода), это использовать queue
. Опять же, как и в случае с ответом Тинистера, для этого вам придется использовать animate, а не fadeIn:
$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...
$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');