Question

My page layout is 3 horizontal DIVS. The middle DIV is going to have content loaded into it. I want the DIV to do a smooth height resize to the appropriate size (like using animate) then fade in the content.

This is what I have at the moment

<div id='a'></div>
<div id='b'>foo</div>
<div id='c'></div>

$( '#a ').fadeOut().innerHtml('bar').hide().fadeIn()

This gives me close to what I want, but looks pretty rough

I am using jQuery 1.7.2 and also have jQueryUI accessible

Elaboration

Currently, the middle DIV will fadeout, then (as there is no content) will disappear. When the new content is added, it instantly resizes and fades in the new content.

What I want to happen is the content fades out and keeps the height. When the new content is added, I want the div to resize to the appropriate height and THEN fade in the content

Answer 1

Change it to the following. Note that you have used innerHtml on a JQuery object, the correct syntax is html. Also, you’ve unnecessarily called hide after you’ve set the content, but the item should already be hidden because you have called fadeOut.

Try this:

$( '#a ').fadeOut().html('bar').fadeIn()

DEMO: http://jsfiddle.net/SmZgw/1/