当动画元素有超过 1 行 float 子元素时，jQuery 高度动画会跳跃

Question

在此处输入代码这个问题的解决方案一直困扰着我，不幸的是，在我正在处理的页面之外重现问题的能力也是如此。

我的问题是这样的:是否有人有关于 jQuery 高度动画(例如lideUp()、slideDown() 或slideToggle())的任何信息，部分动画然后“跳跃”其余部分，以及导致它的原因？

我这里有一个 fiddle :http://jsfiddle.net/d7tbh/

注意:在你因为 fiddle 而投票否决我之前，请阅读其余部分。

fiddle 代表了我正在尝试完成的工作示例，但不幸的是我根本无法重现该问题。由于各种原因，我正在处理的页面无法发布在这里，这并不理想，但如果有人以前遇到过这种情况，只要知道这一点(以及他们对此做了什么)就会有所帮助。

对问题的更深入解释:

与 fiddle 相同的标记、CSS 和脚本。单击 .header 元素会向下滑动 .child 元素。然而，无论有多少“行”，.child 的高度都会动画化为一个 .child-item 元素的高度。此动画完成后，.child 的高度会跳转到容纳所有 .child-item 子项所需的完整高度。然而在 fiddle 上，它工作得很好 - 有什么想法吗？

P.S 我知道不发布其余代码是一个问题，但这超出了我的控制范围，我已经分享了我能分享的内容，并尽我所能描述了该问题。希望以前遇到过同样问题的人能够认识到这个问题，并可能帮助指出原因。

Answer 1

这不是最好的答案，但我解决这个问题的方法是输入 <br style='clear:both;'/>在页面上每 3 个子 div 上，手动换行。

这修复了 slideDown()动画并使其平滑并停止跳跃。

此修复的问题在于它依赖于您能够打印出 <br>每x children (这可以用js来完成，但我使用了php)，而且这意味着如果你有一个液体布局，这会在更宽/更大的屏幕上崩溃，但由于我的是一个固定布局，所以没有任何可能性。

代码:

脚本和 CSS 没有改变，我唯一要做的就是添加一些额外的标记:

我使用的 PHP(模数测试就是全部):

$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);

如何在 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;"/>');
        }
    });
});

编辑:更新了 fiddle 脚本 http://jsfiddle.net/d7tbh/1/