如何同时使用fadeIn和动画？
如何同时使用fadeIn和动画？
提问于 2009-10-31 06:05:51
使用jQuery，我创建了一个基本的“工具提示”动画，这样工具提示就会以一个小动画的形式出现，在这个动画中，工具提示可以淡入视图，也可以垂直移动。
到目前为止，我有这样的想法：
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');这样做或这样做：
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');动画将一次运行一个，首先是淡入，然后是垂直动画。有没有办法同时做这两件事？
回答 3
Stack Overflow用户
回答已采纳
发布于 2009-10-31 06:34:19
$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');但是，这似乎不适用于display: none元素(就像fadeIn一样)。因此，您可能需要预先放置以下内容：
$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);Stack Overflow用户
发布于 2014-01-07 20:15:23
对于几年后仍在寻找的人来说，情况发生了一些变化。您现在也可以使用.fadeIn()的queue，因此它的工作方式如下所示：
$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');这样做的好处是可以处理display: none元素，因此不需要额外的两行代码。
Stack Overflow用户
发布于 2009-10-31 07:31:28
如果你想单独调用它们，另一种做同步动画的方法(例如，来自不同的代码)就是使用queue。同样，与Tinister的答案一样，您必须为此使用animate，而不是fadeIn：
$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...
$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1652576
复制相关文章
相似问题