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

Question

jQueryを使用して、基本的な「ツールチップ」アニメーションを作成し、ツールチップが小さなアニメーションで表示され、ビューにフェードインし、垂直に移動するようにします。

これまでのところこれがあります：

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

その方法またはこの方法で行う：

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

アニメーションは一度に1つずつ実行され、最初にフェードインし、次に垂直アニメーションになります。両方を同時に実行する方法はありますか？

Answer 1

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

ただし、これは display：none 要素では機能しないようです（ fadeIn とは異なります）。したがって、事前にこれを配置する必要がある場合があります。

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

Answer 2

数年後もまだ見ている人のために、状況は少し変わりました。 .fadeIn（）にも queue を使用して、次のように動作するようになりました。

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

これには display：none 要素で作業する利点があるため、余分な2行のコードは不要です。

Answer 3

（たとえば、異なるコードから）別々に呼び出す場合、同時アニメーションを行う別の方法は、 queue を使用することです。繰り返しになりますが、Tinisterの答えと同様に、フェードインではなく、このためにアニメーションを使用する必要があります。

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

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