jQuery hide li elements, then fade in on button hover
<p>I have a standard <code>ul</code> list which contains five <code>li</code> elements. After the third element, I've placed a button in the list with the CSS class <code>.morecats</code>. </p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;button class="morecats"&gt;+&lt;/button&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Using jQuery, I have hidden the first three <code>li</code> elements:</p>

<pre><code>$('ul')
  .find('li:gt(3)')
  .hide()
  .end();
</code></pre>

<p>Now, I'd like jQuery to fade in and show the hidden <code>li</code> elements when the user hovers over the button <code>.morecats</code>. I'd also like a separate div called <code>.bg</code>to fade in/appear. </p>

<p>How could this be accomplished?</p>
