i have a list of items like so:

<ul>
<li><div>some super awesome html here</div></li>
<li><div>another awesome item here</div></li>

....

I'm looking for a nice effect to pop/remove the last item on the list and add/fade in a new item on the top after an ajax call. anyone suggestions would be great. thanks.

EDIT: something more advanced than just simple fade in/out. i've seen it somewhere on the sites where there is a list of 5 items or so and a new item added to the list and old removed with a cool effect.

i have a list of items like so:

<ul>
<li><div>some super awesome html here</div></li>
<li><div>another awesome item here</div></li>

....

I'm looking for a nice effect to pop/remove the last item on the list and add/fade in a new item on the top after an ajax call. anyone suggestions would be great. thanks.

EDIT: something more advanced than just simple fade in/out. i've seen it somewhere on the sites where there is a list of 5 items or so and a new item added to the list and old removed with a cool effect.

• javascript
• jquery-plugins
• jquery

• I just noticed your edit and updated my post. – jncraton Commented Jul 8, 2011 at 12:15

1 Answer 1

jQuery fadeOut()/fadeIn() should do the trick:

http://api.jquery./fadeOut/

http://api.jquery./fadeIn/

EDIT:

If you want something fancier, slideUp()/slideDown() provide basic sliding animations:

http://api.jquery./slideUp/

http://api.jquery./slideDown/

There also animate() if you want to add your own animations via changing CSS properties.

http://api.jquery./animate/