web-dev-qa-db-ja.com

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

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

これまでのところ私はこれを持っています：

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

そのように、またはこのように行う：

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

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

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

ただし、これはdisplay: none要素では機能しないようです（fadeInとは異なります）。したがって、事前にこれを置く必要があるかもしれません。

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

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

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

これには、display: none要素なので、余分な2行のコードは必要ありません。

49
SCB

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

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

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