CODEWITHSUNDEEP
jquery
user317005
user317005

Reputation:

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 gets inserted right before the first li.product, but it doesn't look like it's sliding down right behind the li.name.

Upvotes: 0

Views: 601

Answers (2)

user317005
user317005

Reputation:

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.

Upvotes: 0

genesis
genesis

Reputation: 50976

You need to hide it 

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

first

Upvotes: 1

Related Questions