Como você fadeIn e animado ao mesmo tempo?
-
22-07-2019 - |
Pergunta
Usando jQuery Estou criando uma animação básica 'dica' para que a dica de ferramenta aparecerá em uma pequena animação em que se desvanece em vista, bem como mover verticalmente.
Até agora eu tenho este:
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');
Fazê-lo assim ou assim:
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');
As animações serão executados um de cada vez, o fade in em primeiro lugar e, em seguida, a animação vertical. Existe uma maneira de tê-lo fazer as duas coisas ao mesmo tempo?
Solução
$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');
No entanto, isso não parece trabalho em elementos display: none
(como fadeIn
faz). Assim, você pode precisar colocar isso de antemão:
$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);
Outras dicas
Para as pessoas ainda procuram um par de anos mais tarde, as coisas mudaram um pouco. Agora você pode usar o queue
para .fadeIn()
, bem assim que ele vai funcionar assim:
$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
Isto tem a vantagem de trabalhar em elementos display: none
para que você não precisa de mais duas linhas de código.
Outra maneira de fazer animações simultâneas, se você quiser chamá-los separadamente (por exemplo. A partir de código diferente) é usar queue
. Novamente, como com a resposta de Tinister você teria que usar animado para isso e não fadeIn:
$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...
$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');