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

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

数年後もまだ見ている人にとっては、状況は少し変わっています. queueforも使用できる.fadeIn()ようになり、次のように機能します。

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

これには要素を操作できるという利点があるdisplay: noneため、余分な 2 行のコードは必要ありません。

Answer 3

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

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

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