フェードして表示する方法：インラインブロック

98

私のページには、非表示に追加する必要がある（約30個の）domノードがあり、完全に読み込まれるとフェードインします。
要素にはdisplay：inline-blockスタイルが必要です。

jquery .fadeIn（）関数を使用したいと思います。これには、要素に最初に表示があることが必要です。最初は非表示にするルール。fadeIn（）の後、コース外の要素にはデフォルトの表示があります。

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

jquery fade

— ボリス・カレンス
ソース

39

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

— フィルナッシュ
ソース

私はこのソリューションがより好きで、CSSを私のJSから遠ざけています。

— joshuadelange 2013

14

@joshuadelangeとはいえ、不透明度もCSSです

— ロイ

+1は、要素を表示/非表示にするエンジニアリングプロセスを、それがあるべき場所に集中させるために使用します。

— クレウィス2014年

233

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

— 枕屋
ソース

5

これは間違いなく良い答えです。

— Jason

25

正解です。さらに良いことに、あなたはそれが何であれ、あなたのCSSを持っているためにデフォルトする場合は空白のままにすることができます$("div").fadeIn().css("display","");

— ブランドンダーラム

1

これは本当に受け入れられるべき答えです。既存の受け入れられた答えは、コメント以上のものです。

— Sinister Beard

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });フェードインが終了すると、display：inline-blockが確実に実行される

— Simon

私にはうまくいきません...クラスを使用して初期表示スタイルをnoneに設定したdivに適用しました。要素を調べると、数ミリ秒間、fadeInを呼び出した直後に、スタイルにインラインブロックがあり、スタイルはブロックに設定されています。サイモンの提案では、fadeInの間に要素がブロックとして表示されるため、効果は良くありません

— Giox

11

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

古い：

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

新着：

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

それが私のような別のjQuery newbに役立つことを願っています:)それを行うより良い方法がある場合は、教えてください！

— 単なる開発
ソース

9

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

<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

— Clodoaldo Neto
ソース

2

よると、jQueryのドキュメントのために.show()、

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

したがって、この問題に対する私の解決策は、CSSルールをクラスの表示に適用することでした：要素のインラインブロック、次に、表示を適用する「非表示」と呼ばれる別のクラスを追加しました。.show()エレメントをオンにすると、インラインで表示されました。

— アムレル
ソース

これを設定#el{display:inline-block;display:none;}して実行$('#el').fadeIn();すると、インラインブロックが取得されるときにもこれが機能するはずです。しかし、そうではありません。

— ファンキー

0

これはdisplay:none、cssによるプリセットでも機能します。使用する

$('#element').fadeIn().addClass('displaytype');

（そしてまた$('#element').fadeOut().removeClass('displaytype');）

CSSでの設定：

#element.displaytype{display:inline-block;}

私はこれを回避策と見なします。設定fadeIn()すると、最後のルールが削除display:noneされる#element{display:inline-block;display:none;}ように機能するはずですが、誤動作して両方が削除されます。

— ファンキー
ソース