jquery slideToggle() and unknown height?

Question

Hello!

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

As a practitioner of Progressive Enhancement, I would first tell you to not hide any of that text with javascript disabled.

On page load: Store the height of the elements in a var, then set the height to hide the additional lines of text like you are now. Use that var to to set the height you are animating to in your toggle and you should be fine.

Code example here: http://www.pewpewlaser.com/articles/jquery-smooth-animation

Answer 2

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 :)