fadeIn（）一个带有jQuery的隐形列表项

Question

我有一个无序列表，其中li s开头是不可见的（display:none）。

我希望使用JS函数使特定的li可见。我怎么能这样做？

我已尝试过$("#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

使用这种方式：

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

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

让我解释一下为什么.show(0)优于.show()。当您使用.show()时，它会提供转换，从而简化DOM元素，这是不需要的。这就像显示一个隐藏的元素并平滑地隐藏它，这是不被接受的。

Answer 2

就像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();