How can I load content via ajax and create a slidedown effect?

JQuery:

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

HTML:

<ul id="lists">
    <li class="name">Name:</li>
    <li class="product">Product 1</li>
</ul>

Everything works fine, except for the slidedown effect.

The content ge开发者_JS百科ts inserted right before the first li.product, but it doesn't look like it's sliding down right behind the li.name.

You need to hide it

 $('#lists li.product:first').hide().before(html).slideDown('slow');

first

Solution:

$.get('/file.php', function(html)
{
    $('#lists li.product:first').before(html);

    $('#lists li.product').hide().slideDown('slow');
});

That seems to work for me now.