We've all come across it before.. Animations that seem to "jump", perhaps all the time, perhaps just in certain browsers.
In any case, it's to do with Jquery not being able to properly calculate the height of the div before it shows it. In this case, it guesses.. Probably incorrectly, the "jump" is when it corrects itself.
As with everything to do with the web, there's a very simple fix. Simply add a an absolute height rule
(height: ###px) into your CSS.
But what if you've got a dynamically sized div that you're hiding via Javascript?
If you're, for example, creating an accessible website, asin, you have content on the page then hiding
it with Javascript to make it "pretty".. You'll probably be doing something like this:
$('.hideme').hide();
If you are, great.. If not, you'll have to adapt the simple concept to your needs. Concept:
For each element that you're hiding, simply set the width via Javascript, then hide it:
$.each($('.hideme'), function() {
this.style.height = $(this).height();
$(this).hide();
});All that code does is effectively "store" the old/actual height, before you hide it (thus lose the value).
Question about / issue with this tip?
Email Me: rud...@rudiv.se