你怎么褪色和同时animation？

使用jQuery我创build了一个基本的“工具提示”animation，这样工具提示就会出现在一个小的animation中，在这个animation中，它可以淡入视图，也可以垂直移动。

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

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

这样做或这样做：

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

animation将一次运行一个，首先淡入，然后是垂直animation。 有没有办法让它在同一时间？

Answer 1

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

但是，这似乎不工作display: none元素（如fadeIn ）。 所以，你可能需要事先把这个：

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

Answer 2

对于几年后还在看的人来说，情况有所改变。 您现在可以使用.fadeIn()的queue ，以便它可以像这样工作：

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

这有利于display: none元素，所以你不需要额外的两行代码。

Answer 3

如果要分开调用它们（例如，从不同的代码），则同时进行animation的另一种方法是使用queue 。 再次，如同Tinister的答案，你将不得不使用animation为此而不是淡入：

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