1. ホーム
  2. jquery

[解決済み] CSS表示のアニメーション化

2022-02-25 17:44:16

質問

jQueryでCSSのdisplayプロパティをアニメーション化する方法はありますか?私は以下のようなものを持っています。

$(".maincontent").css("display","block");

で、以下のような動作をさせたい。

$(".maincontent").animate({"display": "block"}, 2500);

解決方法は?

を使うだけです。 .show() をパラメータとして渡します。

$(".maincontent").show(2500);

編集 (コメントを元に作成) :

上記のコードでは、2.5秒のスパンで要素がフェードインしています。 もし、2.5秒だけ遅らせて表示させたい場合は、次のようにします。

$(".maincontent").delay(2500).fadeIn();

もちろん、ディレイやフェードを長くしたい場合は、各メソッドに希望のミリ秒数を渡せばよい。