fadeIn（）使用jQuery隱藏列表項目

Question

我有一個無序列表，其li s是不可見的（display:none）開頭。

我想使一個特定的li可見與JS功能。我怎樣才能做到這一點？

我試過$("#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> 

我試圖回答this question。隨意嘗試一下吧！

Answer 1

就像bdares說的那樣，一個看不見的元素不能有一個可見的孩子。所以你對代碼的描述是真的：ul必須首先可見。

看着html代碼，你可能只需刪除class="hide"這將使ul可見。

但是，如果你不能這樣做，另一種方法是使用Javascript來使飛行中的UI可見。取而代之的只是：

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

做

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

Answer 2

用這樣的方式：

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

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

讓我解釋一下你爲什麼 .show(0)比 .show()更好。當你使用 .show()時，它給出了一個轉換，它簡化了不需要的DOM元素。這就像展示了一個隱藏的元素並且順利隱藏它，這是不被接受的。