I have the same problem in a similar situation. Greatly simplified, I have the following on a page:
- <div class="details">
- <div class="shortdetails">
- BLAH (approx 250 chars)
- </div>
- <div class="fulldetails hidden">
- BLAH (up to 2000 chars)
- </div>
- <a href="javascript: void(0);" class="showfull">View Full</a>
- </div>
When the "View Full" link is clicked, the ".shortdetails" perform a "slideUp" which works fine, then (as a callback) the ".fulldetails" performs a slideDown which also works fine. The link is then altered to be a "View Short" link.
When the "View Short" is clicked the ".fullDetails" performs a "slideUp" which works fine, then the ".shortDetails" performs a "slideDown" (again, as a callback).
When the "slideDown" occurs on the shorter div, the animation appears to continue until the full height of bigger div, even though it isn't visible. When the animation finally completes (having added a huge chunk of white space to the page) it "jumps" back to the correct height of the shorter div, which looks awful!
I have tried to recreate the effect of slideUp and slideDown using animate(), but haven't had any luck so far (I didn't spend much time playing with animate!).
My short-term answer is to just use hide() and show() even though it looks rubbish!
An answer to this problem would be really useful, or a fix to the bug would be even better!