你如何同时淡化和动画？

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

对于仍然在几年后看的人来说,事情已经发生了一些变化.您现在可以使用queuefor .fadeIn(),以便它可以像这样工作:

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

这有利于处理display: none元素,因此您不需要额外的两行代码.

Answer 3

如果你想单独调用它们(例如,来自不同的代码),另一种同时动画的方法是使用queue.再次,与Tinister的答案一样,你必须使用animate来实现这一点而不是fadeIn:

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

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