web-dev-qa-db-ja.com

CSSディスプレイのアニメーション化

JQueryのCSS表示プロパティをアニメーション化する方法はありますか？私は次のものを持っています：

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

そして、次のようなことをしたい：

$(".maincontent").animate({"display": "block"}, 2500);
jquerycssjquery-animate
19
danyo

.show()を使用して、パラメーターを渡します。

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

編集（コメントに基づく）：

上記のコードは、2.5秒のスパンで要素をフェードインします。代わりに2.5秒の遅延が必要な場合に、要素を表示するには、次を使用します。

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

もちろん、遅延とより長いフェードが必要な場合は、必要なミリ秒数を各メソッドに渡すだけです。

28
Derek Henderson

次のようなことができます：

$("div").css({
    "opacity":"0",
    "display":"block",
}).show().animate({opacity:1})

例： http://jsfiddle.net/charlescarver/g7z6m/

これには、display:none。コードが呼び出されて表示されるまでページのフローから削除されるため、不透明度を0に設定します。コードを呼び出すと、不透明度が1にアニメートされます。

4
Charlie

これを試してください（コメントで述べたように）：

.delay()メソッドを使用できます。 I.E：

$(".maincontent").delay(2500).show();
1
Shivam

JQueryを使用した不透明度のアニメーションは、表示プロパティよりも実行可能です。ここでは、不透明度は1秒で0から1にアニメーション化されます。

$(".maincontent").animate({opacity:1},1000)

次に、CSSは次のようになります。

.maincontent{ 
opacity: 0;
}

遷移の前にブロック全体を非表示にすることを計画している場合は、表示プロパティを使用できます。

.maincontent{
opacity: 0;
display: none;
}

次に、ブロックをアニメーションで表示するには：

$(".maincontent").show().animate({opacity:1},1000 function(){
  (callback function here)
})

お役に立てれば！

0
Ken Seah