Question

Im using jquery 1.3.2 and this is the code:

    <script type="text/javascript">
    //<![CDATA[
    jQuery(function(){
        jQuery('.news_bullet a.show_preview').click(function() {
            jQuery(this).siblings('div').slideToggle('slow');
            return false;
        }).toggle(
        function() {
            jQuery(this).css({ 'background-position' : '0 -18px' });
        },
        function() {
            jQuery(this).css({ 'background-position' : '0 0' });
        });
    });
    //]]>
</script>

If you see here i have bunch of small green + which when you click some text is revealed and background-position is changed for that link so then it shows the other part of image, red -.

So the problem i am having is that i dont know the height for those hidden elements, because it depends on how much text there is, so when i click on + and show them, animation is ‘jumping’.

One workaround that i found is to put fixed height and overflow:hidden to those hidden elements. You can see how much smoother animation is running in top left block(the one with ‘Vesti iz sveta crtanog filma’ at the top). All other blocks dont have fixed height, and animation there is ‘jumping’. Atm that fixed height in top left block is 30px, but ofc some elements require more height and some require less, so that is not a good solution… 🙂

So how to stop this animation from ‘jumping’ when there is no fixed height?

Answer 1

If you give them a width in CSS it’ll stop this behavior:

.news_bullet .hide { width: 272px; }

Or even with jQuery:

jQuery(".news_bullet .hide").width(272);

Either of these options will stop the jumpy slides 🙂