どのようにしてフェードインとアニメーションを同時に行いますか?
-
22-07-2019 - |
質問
jQueryを使用して、基本的な「ツールチップ」アニメーションを作成し、ツールチップが小さなアニメーションで表示され、ビューにフェードインし、垂直に移動するようにします。
これまでのところこれがあります:
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');
その方法またはこの方法で行う:
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');
アニメーションは一度に1つずつ実行され、最初にフェードインし、次に垂直アニメーションになります。両方を同時に実行する方法はありますか?
解決
$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');
ただし、これは display:none
要素では機能しないようです( fadeIn
とは異なります)。したがって、事前にこれを配置する必要がある場合があります。
$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);
他のヒント
数年後もまだ見ている人のために、状況は少し変わりました。 .fadeIn()
にも queue
を使用して、次のように動作するようになりました。
$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
これには display:none
要素で作業する利点があるため、余分な2行のコードは不要です。
(たとえば、異なるコードから)別々に呼び出す場合、同時アニメーションを行う別の方法は、 queue
を使用することです。繰り返しになりますが、Tinisterの答えと同様に、フェードインではなく、このためにアニメーションを使用する必要があります。
$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...
$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
所属していません StackOverflow