如何同时淡入和设置动画? [英] How do you fadeIn and animate at the same time?

问题描述

使用jQuery，我正在创建一个基本的工具提示"动画，以便该工具提示将显示在一个小的动画中，在该动画中它会淡入视图并垂直移动.

Using jQuery I'm creating a basic 'tooltip' animation so that the tooltip will appear in a little animation in which it fades into view as well as move vertically.

到目前为止，我有这个:

So far I have this:

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

以这种方式或方式进行操作:

Doing it that way or this way:

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

动画一次运行一次，先淡入，然后垂直动画.有没有办法让它们同时做?

The animations will run one at a time, the fade in first and then the vertical animation. Is there a way to have it do both at the same time?

推荐答案

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

但是，这似乎不适用于display: none元素(就像fadeIn一样).因此，您可能需要事先放置:

However, this doesn't appear to work on display: none elements (as fadeIn does). So, you might need to put this beforehand:

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

这篇关于如何同时淡入和设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！