jQuery 你如何同时淡入和动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1652576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you fadeIn and animate at the same time?
提问by JayNCoke
Using jQuery I'm creating a basic 'tooltip' animation so that the tooltip will appear in a little animation in which it fades into view as well as move vertically.
使用 jQuery，我正在创建一个基本的“工具提示”动画，以便工具提示将出现在一个小动画中，在该动画中它会淡入视图并垂直移动。
So far I have this:
到目前为止，我有这个：
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');
Doing it that way or this way:
这样做或这样：
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');
The animations will run one at a time, the fade in first and then the vertical animation. Is there a way to have it do both at the same time?
动画将一次运行一个，先淡入，然后是垂直动画。有没有办法让它同时进行？
回答by Tinister
$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');
However, this doesn't appear to work on display: noneelements (as fadeIndoes). So, you might need to put this beforehand:
但是，这似乎不适用于display: none元素（就像fadeIn）。所以，你可能需要事先把这个：
$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);
回答by SCB
For people still looking a couple of years later, things have changed a bit. You can now use the queuefor .fadeIn()as well so that it will work like this:
对于几年后仍在寻找的人来说，情况已经发生了一些变化。您现在也可以使用queuefor .fadeIn()，以便它可以像这样工作：
$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
This has the benefit of working on display: noneelements so you don't need the extra two lines of code.
这具有处理display: none元素的好处，因此您不需要额外的两行代码。
回答by bobince
Another way to do simultaneous animations if you want to call them separately (eg. from different code) is to use queue. Again, as with Tinister's answer you would have to use animate for this and not fadeIn:
如果您想分别调用它们（例如，从不同的代码），同时执行动画的另一种方法是使用queue. 同样，与 Tinister 的回答一样，您必须为此使用 animate 而不是淡入淡出：
$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...
$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
