jqueryのanimateメソッドで上手くいかないのですが、解決策をご教授頂けないでしょうか?
以下、2パターンを試してみたのですが、アニメーションが上手く行きません。実現したいこととしては、指定時間をかけて対象レイヤーの透明度が0になった後、また透明度が1に戻るといったアニメーションです。
Pattern A(ダメ)
$("#overlay").animate({opacity: "0"}, 500);
$("#overlay").animate({opacity: "1"}, 500);
.
Pattern B(ダメ)
$("#overlay").animate({opacity: "0"}, 500, function(){
$(this).animate({opacity: "1"}, 500);
});
一応、一つ目のanimateメソッドのみ実行させる場合ですと、透明度が0になることは確認出来ています。2連続で実行させようとすると、1つ目のアニメーションすら行われていないようです。
$("#overlay").animate({opacity: "0"}, 500);
みんなの回答 4 件
それぐらいならもっと簡単にできるよ。
それぐらいならもっと簡単にできるよ。
<style>
.overlay {
animation: fade 1.5s 1;
opacity: 0;
}
@keyframes fade {
0% {
opacity: 0;
}
50%{
opacity: 1;
}
100% {
opacity: 0
}
}
</style>
<div class="overlay">overlay</div>
2個目は普通に動作しますよね?
※リンク参照
1個目は、
$("#overlay").animate({opacity: "0"}, 500);
$("#overlay").animate({opacity: "1"}, 500);
と記述してしまうとopacityを0にする処理と1にする処理が順番に実行される訳ではなく、同時に動作してしまうので上手く動きません。
Edit fiddle - JSFiddle
https://jsfiddle.net/rguupx04/パターンBで、
$("#overlay").animate({opacity: "0"}, {duration:500,complete:function(){
$(this).animate({opacity: "1"}, {duration:500});
}});
関連するトピックス