如何很好地将前置项滑到列表中

Question

similar to twitter's ux, I want to prepend a feed item to a list and have it SlideDown on entry.

Here's my attempt here: http://jsfiddle.net/26jaw/9/

What I've learned so far is that for the slideDown to work the height needs to be set, min-height doesn't work. So given that the feed item height is variable, I find the height after injecting it in the page. I then set the height, and slideDown. but for some reason that isn't working as you can see in the jsfiddle. The height being reported by jQuery is invalid and the height is wrong resulting in text being cut off.

Any ideas? Better solutions? Thanks

Answer 1

Remove this declaration from the CSS rule #feedlist {} :

height: 600px;

Then change your JavaScript to:

item = $(content).prependTo("#feedList");
height = item.height();
item.hide();
item.css("height", height).slideDown();

See updated fiddle .