你如何在同一时间淡入淡出和动画？

使用jQuery我创建了一个基本的“工具提示”动画，这样工具提示就会出现在一个小的动画中，它会淡入视图并垂直移动。你如何在同一时间淡入淡出和动画？

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

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

做它的方式或者是这样的：

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

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

来源

2009-10-30 JayNCoke

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

然而，这似乎并没有在display: none元素的工作（如fadeIn一样）。（例如，从不同的代码）：所以，你可能需要把这个事先如果你想单独给他们打电话

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

来源

2009-10-30 22:34:18 Tinister

+24

+1。但是，$（'。tooltip'）。show（）'是'$（'。tooltip'）。css（'display'，'block'）;'的更好选择。 – Noldorin 2009-10-30 22:35:58

@Noldorin谢谢 – Tinister 2009-10-30 22:36:58

如何IE浏览器'{过滤器：alpha（不透明度= 50）;}'？这是否也照顾这个选项呢？ – 2013-01-10 20:32:50

另一种方法同时动画是使用queue。同样，与Tinister的答案，你将不得不使用动画，这和不淡入：

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

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

来源

2009-10-30 23:31:28 bobince

对于人们仍在寻找一个几年后，事情已经改变了一点。您现在可以使用queue为.fadeIn()也使得它会像这样：

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

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

来源

2014-01-07 12:15:22 SCB

队列是强大的选项，特别是在处理动画效果时，非常感谢。 – QMaster 2016-11-05 09:28:54

你如何在同一时间淡入淡出和动画？

回答

相关问题