你如何淡入，并在同一时间动画？

Question

使用jQuery我创建一个基本“工具提示”动画，以使工具提示将显示在一个小动画在其淡入视图以及垂直移动。

到目前为止，我有这样的：

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

否则这种方式或这样：

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

在动画将运行一次一个，在第一褪色，然后垂直动画。有没有办法把它在同一时间做两？

Answer 1

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

然而，这不会出现上display: none元件工作（如fadeIn一样）。所以，你可能需要把这个事先：

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

Answer 2

有关人员还在寻找一个几年后，事情已经改变了一点。现在，您可以使用queue的.fadeIn()以及使之工作是这样的：

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

这对display: none要素工作，所以你不需要额外的代码两行的利益。

Answer 3

另一种方式来做到同步的动画，如果你想单独打电话给他们（例如，从不同的代码）是使用queue。同样，与Tinister的答案，你将不得不使用动画，这和不淡入：

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

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