Question

enter code hereThe solution to this is eluding me, and unfortunately so is the ability to reproduce the problem outside of the page I’m working on.

My question is this: does anybody have any information on a jQuery height animation (such as slideUp(), slideDown(), or slideToggle()) animating partly then ‘jumping’ the rest of the way, and what causes it?

I have a fiddle here: http://jsfiddle.net/d7tbh/

NOTE: before you vote me down because of the fiddle, please read the rest.

The fiddle represents a working example of what I’m trying to accomplish but unfortunately I cannot reproduce the problem at all. The page I’m working on can’t be posted here for a variety of reasons which is not ideal but nonetheless if anyone has run into this before, just knowing that (and what they did about it) would help.

A more in-depth explanation of the problem:

Same markup and css and script to the fiddle.
Clicking on the .header element slides down the .child element.
However the height of .child animates to the height of one .child-item element, regardless of how many ‘rows’ there are. Once this animation completes, the height of .child jumps to the full height required to hold all the .child-item children.
However on the fiddle, it works fine – any ideas?

P.S I know not posting the rest of the code is a problem but it’s out of my control, I’ve shared what I can and described the problem as best I am able. Hopefully it is enough for someone who has had the same problem before to recognise it and maybe help point to the cause.

Answer 1

This isn’t the best answer but the way I got around this was to put a <br style='clear:both;'/> on the page every 3 child divs, to break the rows manually.

This fixed the slideDown() animation and made it smooth and stopped it jumping.

The problem with this fix is that it relies on you being able to print out a <br> every x children (this can be done with js but I used php) and also that it means that if you have a liquid layout, this will break on wider / larger screens but as mine is a fixed layout it makes no odds.

The code:

The script and css are unchanged, the only thing I’m doing is putting in a bit of extra markup:

The PHP I used (the modulus test is all there is to it):

$count=0;
do {
  $count++;
  echo '<div class="child-item">etc</div>';

  if ($count%3==0)
  {
    //this is the third in this row, print a break
    echo '<br style="clear:both;"/>';
  }
}while($sqlResults);

How you can accomplish something similar in jQuery:

var count=0;
$('.child').each(function(){
    count=0;
    //for each container element, loop through its children
    $(this).children('.child-item').each(function(){
        count++;
        if (count%3==0)
        {
           //this item is the third in a row, print a br.
           $(this).after('<br style="clear:both;"/>');
        }
    });
});

EDIT: updated fiddle script http://jsfiddle.net/d7tbh/1/