Question

I am animating in divs in a specific order. I start them all at the top with absolute positioning and display: none so they are on top of each other in the same space and invisible. In a specific order determined by something else, I want to fade them in individually and slide down the ones that have already been faded in.

I’m using code that loops through the comments and checks if one is ready to go (by the other metric that is not important). If it is, that is when I want to do this fade in/slide down others thing. Here’s how I’m (unsuccessfully) trying to do this:

$('#item' + i).fadeIn("slow");
$('#item_' + i).animate({   
    top: '0px'
}, 500);
$('#item_' + i).css('position', 'relative');

Answer 1

What’s the point of absolute positioning, if you have display: none? You can make all divs relatively positioned or remove the position style altogether. Then just grab the div and prepend it to desired container – http://jsfiddle.net/zvc76/1/

$("#item" + i).prependTo("#container").show(400);