javascript - fadeIn() 使用 jQuery 的不可见列表项

Question

我有一个无序列表，其lis 一开始是不可见的 ( 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>

我试图回答这个问题。随意尝试一下！

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