fadeIn() an invisible list item with jQuery
<p>I have an unordered list whose <code>li</code>s are invisible (<code>display:none</code>) to begin with.</p>

<p>I want to make a specific <code>li</code> visible with a JS function. How can I do that?</p>

<p>I've tried <code>$("#my-list li:nth-child(1)").fadeIn()</code> but that only works if the <code>ul</code> is visible to begin with.</p>

<p>Here's my code:</p>

<pre class="lang-css prettyprint-override"><code>ul.hide &gt; li {
    display: none;
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;ul class="hide" id="my-list"&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I'm trying to answer <a href="https://bountify.co/i" rel="nofollow">this question</a>. Feel free to take a stab at it!</p>
