jQuery slideDown Snap Back Issue

Question

I have the same problem that I am reading about all over the web, although I can't find the solution.

Simply put, when using the slideDown() method on my DIV elements, I get that ugly snap back effect where jQuery slides the DIV size down too far and then it snaps back to the actual size in an ugly way.

Looking over the web, iv tried removing all margins and padding from the offending elements, but it does nothing.

I cant set static sizes for the div's because each one will change on page load. One loaded though they wont change. (new divs are also created using ajax)

Heres a sample DIV

<div class="response hidden new">  
<div class="right"><span class="responseTime">10:28:10 AM</span></div>  
<span class="responseUser">Someone</span><br> 
<span class="responseMessage">sdgs sdgh</span>
</div>

and the CSS

div.response {
line-height: 20px;
border-bottom: 1px dotted #546268;
}

.responseMessage {display: block}

Can anyone help me here? Im out of ideas .. Iv tried using jQuery to figure out the height of the DIV first then force the height using CSS() before calling the slideDown() but jQuery was almost always wrong about the height ...

The response div is also hidden using the display:none property.

This function is then being called on it

function quickResponse(time, user, message, epoch) {
    $('.latestStar').remove();
    addResponse(time, user, message, epoch);
        $('.new').slideDown(500).removeClass('hidden');
    $('html, body').animate({ scrollTop: '0px'}, 1000, function() {
    });     
}

Edit I forgot to mention, that if the div only contains 1 word, the snap back effect doesnt happen .. but if I type multiple words with spaces, it happens..

Its almost like adding spaces causes the height to screw up.

Answer 1

Have a look on fixes:
1. SlideDown Animation Jump Revisited
2. Fixing jQuery's slideDown() jump effect

Also that same glitch documented (with fix) on jQuery website: http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch

And try to add following code before your code (on document onload):

$('.new').css('height', $('.new').height());
$('.new').hide();

This way you will set height explicitly, and be sure to display your div initially, the above code will hide it later, because I think it will fail to set right height to hidden div, though you can try. Good Luck~

Answer 2

I was having the snap-back-on-slide-down problem on an LI item I was adding to a UL. There was nothing fancy about it so I was finding it puzzling (and had seen this before, but didn't remember how I'd fixed it then).

In my case, the only fix I needed was do specify a width on my LI and was able to slideDown() and slideUp() smoothly.

e.g.

ul li { width: 100%; }

I got this tip from one of the links posted by @arman-p (which suggests adding a width to the element can fix this problem, which it did in my case).