How can I load content via ajax and create a slidedown effect?
<p>JQuery:</p>

<pre><code>$.get('/file.php', function(html)
{
    $('#lists li.product:first').before(html).slideDown('slow');
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;ul id="lists"&gt;
    &lt;li class="name"&gt;Name:&lt;/li&gt;
    &lt;li class="product"&gt;Product 1&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Everything works fine, except for the slidedown effect.</p>

<p>The content gets inserted right before the first <code>li.product</code>, but it doesn't look like it's sliding down right behind the <code>li.name</code>.</p>
