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

Question

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

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

我这里有一个小提琴： http://jsfiddle.net/d7tbh/

注意：在你投票反对我之前，因为小提琴，请阅读其余部分。

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

对问题的更深入解释：

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

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

Answer 1

这不是最好的答案，但我解决这个问题的方法是在页面上每 3 个子 div 放置一个
，以打破手动行。

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

此修复的问题在于，它依赖于您能够打印出每个 x 子级的
（这可以使用 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;"/>');
        }
    });
});

编辑：更新了小提琴脚本 http://jsfiddle.net/d7tbh/1/