5 Answers
5

What I've done in the past is insert zero-size placeholder-divs at the point where I want to insert my new element.

I then animate that placeholder to the size I want, then insert a hidden version of the element I want to show inside the placeholder and fade it into view.

Once the fade-in is complete I 'unwrap' the placeholder to remove it, using the following code:

// Essentially, this does the opposite of jQuery.wrap. Here is an example:
//
// jQuery('p').wrap('<div></div>');
// jQuery('p').parent().unwrap().remove();
//
// Note that it is up to you to remove the wrapper-element after its
// childNodes have been moved up the DOM
jQuery.fn.unwrap = function () {
return this.each(function(){
jQuery(this.childNodes).insertBefore(this);
});
};

All jQuery animation features have 'onComplete' handlers that allow you to kick-off different parts of the animation once they're completed, so it's not too much of a chore to achieve all of this.

Also, it's very useful to keep a JavaScript model of all your elements instead of relying on slow DOM-traversal and the jQuery .data() method.

where 1000 is the speed of which the item can fade in. I put the hide() in there assuming that the new DOM element is visible when created, not sure if it's needed or not. Best thing to do is put a "display: none" on the new element when you create it and then just use fadeIn().

There's other effects you can use too like slideUp/slideDown so you may want to look into those too.