どのようにフェードインとアニメーションを同時にしますか？

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

別の方法を同時にアニメーションを行うには、あなたがそれらを個別に呼び出したい場合はqueueを使用することです。繰り返しますが、フェードイン、このためにアニメーションを使用する必要はないでしょうTinisterの答えのように：まだ数年後に見ている人々のために

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

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

Answer 3

を、物事は少し変更されました。それはこのように動作するようになりましたとしても.fadeIn()ためqueueを使用することができます。

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

これは、コードの余分な2行を必要としないので、display: none要素に取り組んでのメリットがあります。