jquery - フェードして表示する方法: inline-block

Question

私のページには、目に見えないように追加し、完全に読み込まれるとフェードインする必要がある多数の (約 30) dom ノードがあります。
要素には display: inline-block スタイルが必要です。

jquery .fadeIn() 関数を使用したいと思います。これには、要素が最初に display: none; を持っている必要があります。最初は非表示にするルール。fadeIn() の後、コースから外れた要素にはデフォルトの表示があります: inherit;

継承以外の表示値でフェード機能を使用するにはどうすればよいですか?

score 243 · Accepted Answer

243

$("div").fadeIn().css("display","inline-block");

于 2012-04-25T19:44:20.987 に答える

score 40 · Accepted Answer

jQueryのanimate関数を使用して、不透明度を自分で変更し、表示に影響を与えないようにすることができます。

score 11 · Accepted Answer

Philの良いアイデアを具体化するために、ここに、クラス.fadedを使用して各要素のフェードをロードし、animate（）に変換するfadeIn（）を示します。

年：

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

新しい：

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

それが私のような別のjQuerynewbに役立つことを願っています:)それを行うためのより良い方法があれば、教えてください！

score 9 · Accepted Answer

まくらの答えはうまくいかなかったので、私の解決策は

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hideすぐに適用されますdisplay: noneが、その前に現在の表示値が jQuery データキャッシュに保存され、その後のアニメーション呼び出しによって復元されます。

したがって、div開始は静的にとして定義されdisplay: noneます。次に、に設定されinline-block、すぐに非表示になり、フェードインして元に戻りますinline-block

score 2 · Accepted Answer

要素の表示値が inline の場合、非表示にしてから表示すると、再びインラインで表示されます。

したがって、この問題に対する私の解決策は、要素のクラス display: inline-block に css ルールを適用することでした。次に、display: none; を適用する「hide」という別のクラスを追加しました。要素を.show()表示すると、インラインで表示されました。

6 に答える 6