I'm just playing around with the autoHeight() function on a DIV element. I have an empty DIV element that, upon loading the website, has its opacity set to 0, then I load() an HTML file. I use a callback function with load(), and on success, I called the autoHeight(true) function, then set the opacity to 1. Of course, the goal is to update the DIV element with new content, and animate the difference in height as the new content gets faded in.

The only issue I'm having is that prior to updating the DIV's height to the height of the new content, the height of the DIV gets smaller first, which I'm assuming is the 'Loading...' text while the new content is being loaded. What I don't understand is that since the height of the DIV has been set once the content is loaded, why does the DIV update its height for the 'Loading...' text? Shouldn't it just update the height to that of the new content?

I would post the code, but a demo is much more effective.

Check out: http://www.ann0yanc3.com/ext-test/

BTW, I've included ext-all-debug.js, so it may take a second to load.

Click on the 'Change Me' button first. Then on the 'Change Me Again' button to load the original content.

Thanks in advance.