web-dev-qa-db-ja.com

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

私のページには、非表示で追加する必要がある（約30個の）domノードがあり、それらが完全にロードされるとフェードインします。
要素には表示が必要です：インラインブロックスタイル。

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

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

jqueryfade
95
Boris Callens

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

38
philnash

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

223
MakuraYami

Philの良いアイデアを具体化するために、次の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);
});

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

11
Mere Development

枕の答えは私には役に立たなかったので、私の解決策は

<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にフェードインします。

8
Clodoaldo Neto

jQuery docs for .show()によると、

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

したがって、この問題に対する私の解決策は、CSSルールをクラス表示に適用することでした。要素のインラインブロック、表示を適用する「非表示」という別のクラスを追加しました。要素で.show()すると、インラインを示しました。

2
amurrell

これは、cssによって事前設定された_display:none_でも機能します。つかいます

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

（および$('#element').fadeOut().removeClass('displaytype');）

cSSでのセットアップ：

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

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

0
Fanky