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
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~