-
ID:3lYkPz さんの質問

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 件

ID:msGs8x さんの回答

それぐらいならもっと簡単にできるよ。

  • $("#overlay").fadeTo(500,0.5).delay(500).fadeTo(500,1);

ID:3lYkPz

ありがとうございます!出来ました!後で教えていただいたメソッドをググって勉強してみます。

すいません。ちなみにfadeTo(0, 0)みたいに最初だけ速攻透明度を0にしたいと思ったのですが、この場合はどうすれば良いのでしょうか?最初のfadeToの引数を(0, 0)にしただけではダメでした。css("opacity", 0)でもダメでした。

ID:msGs8x

初期設定ならCSSでやれば?

ID:ABgKAS

最初の一回だけでなく、このトランジションは定期的に行われるのでCSS側だと出来なさそうです(?)

ID:3lYkPz

ありがとうございました。無事解決しました!

ID:Kq7kNN さんの回答

それぐらいならもっと簡単にできるよ。
<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>

ID:ABgKAS

こんなやり方も出来るのですね!css3のアニメーションはまだ理解していないので、参考になります!ありがとうございます。

ID:ZG7gVf さんの回答

2個目は普通に動作しますよね?
※リンク参照

1個目は、
$("#overlay").animate({opacity: "0"}, 500);
$("#overlay").animate({opacity: "1"}, 500);

と記述してしまうとopacityを0にする処理と1にする処理が順番に実行される訳ではなく、同時に動作してしまうので上手く動きません。

Edit fiddle - JSFiddle

https://jsfiddle.net/rguupx04/
ID:3lYkPz

animateのメソッドは非同期で行われるものなのですか?調べてみます!

ID:ZG7gVf

コメ主です。

非同期で動作します。内部処理的にはsetIntervalで連続してCSSの値を変更し、アニメーションしているように見せているだけです。また非同期で実行されるからコールバック関数が用意されている訳です。

ID:3lYkPz

補足の説明ありがとうございます。jquery便利で素敵ですね!

ID:VyXJvu さんの回答

パターンBで、
$("#overlay").animate({opacity: "0"}, {duration:500,complete:function(){
$(this).animate({opacity: "1"}, {duration:500});
}});

最終更新日:2016-02-18 (1,662 views)

関連するトピックス

ページ上部に戻る