Jquery slidedown not sliding; instead, replacing

I am trying to write a little script that - one by one - grabs some pre-made divs out of an array of divs, puts them on the page, and then slides each of them down. The goal is to end up with something like this, but for a potentially large and dynamic number of divs.

Here's the function I'm using ("list" is my array of divs):

function popMsg(){
        var popped = list.pop(); 
        $(popped).appendTo("#chatframe").addClass("sliding");
        $(".sliding").slideDown(1000);
        setTimeout(popMsg, 1000);
    }

It is working in terms of getting the divs on the page, but the slidedown doesn't happen. Instead, each div replaces the last, just layering one on top of anot开发者_如何学编程her. I'm not sure what I'm doing wrong and am totally out of ideas.

Gah! Figured it out. I was doing two insanely stupid things:

a) I had the css for .sliding set to absolute. I changed it to relative.

b) I needed prependTo instead of appendTo. This makes each div push down the ones before it.

It's now working like a dream.