javascript - およびjQueryを使用した非表示のリストアイテムfadeIn（）

Question

liそもそもsが見えない（）という順序付けられていないリストがありdisplay:noneます。

liJS関数で特定のものを見えるようにしたい。どうやってやるの？

私は試しまし$("#my-list li:nth-child(1)").fadeIn()たが、それは最初にが表示されている場合にのみ機能ulします。

これが私のコードです：

ul.hide > li {
    display: none;
}

<ul class="hide" id="my-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

私はこの質問に答えようとしています。お気軽にどうぞ！

score 0 · Accepted Answer

このように使用します：

~~$("#my-list").show(0).children("li:nth-child(1)").fadeIn();~~

$("#my-list").show().children("li:nth-child(1)").fadeIn();

なぜ.show(0)より良いのか説明させてください.show()。を使用する.show()と、遷移が発生し、不要なDOM要素が緩和されます。それは、隠された要素を表示し、それをスムーズに非表示にするようなものですが、これは受け入れられません。

score 0 · Accepted Answer

bdaresが言ったように、目に見えない要素は目に見える子を持つことはできません。したがって、コードについてあなたが言ったことは真実です。まず、ulが表示されている必要があります。

htmlコードを見ると、おそらく削除するだけclass="hide"でulが表示されます。

ただし、それができない場合は、Javascriptを使用してulをその場で表示することもできます。ただの代わりに：

$("#my-list li:nth-child(1)").fadeIn();

行う

$("#my-list").show();
$("#my-list li:nth-child(1)").fadeIn();

2 に答える 2