Question

What I want to do can be accomplished just by using:

 slideDown("fast");

However, I don’t like how it reveals the element, I would like for it to be 100% of the elements original height, and roll down. I’m wondering if there’s an easy way of doing this? Other than perhaps changing the margin-top and such, then animating it back to normal.

Example of what I want to do:
http://jsfiddle.net/7dary/1/
However I would like to have it just do all of the calculations automatically, and it not show in the middle of the page if it’s at the bottom of the page and I personally assign -200px or something to it.

Answer 1

Solution:

var $element = $("#itemToSlide"); // make sure its visible
var height = $element.height(); // get the height when its populated
$element.css({marginTop:height*-1}); // set it to 0 with an overflow hidden

// trigger the animate now or later in an event
$element.show().animate({marginTop:0},2200); 

link: http://jsfiddle.net/MattLo/7dary/2/