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

【问题标题】：jQuery height animation jumps when the animated element has more than 1 row of floated children当动画元素有超过 1 行浮动子元素时，jQuery 高度动画会跳转
【发布时间】：2011-09-02 16:23:01
【问题描述】：

在此处输入代码我无法解决这个问题，不幸的是，在我正在处理的页面之外重现问题的能力也是如此。

我的问题是：有没有人有关于 jQuery 高度动画的任何信息（例如 slideUp()、slideDown() 或 slideToggle()）部分动画然后“跳跃”其余部分，以及它的原因?

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

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

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

对问题更深入的解释：

与小提琴相同的标记、css 和脚本。单击 .header 元素会向下滑动 .child 元素。然而，.child 的高度动画到一个.child-item 元素的高度，无论有多少“行”。此动画完成后，.child 的高度会跳到容纳所有 .child-item 子级所需的全高。然而，在小提琴上，它工作正常 - 有什么想法吗？

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

【问题讨论】：

我在你的 jsfiddle 中也看到了“跳转”，但这取决于我的浏览器的尺寸。移动大小会使跳跃效果消失。
+1 获取漂亮的小猫照片
当浏览器的宽度接近孤儿kitty照片弹回前一行的宽度时，跳转效果返回。
我明天会回到这个，感谢 cmets re：漂亮的小猫和对动画跳跃的敏锐观察。我脑子里有一个解决方案，但在我测试过和/或有人发布更好的解决方案之前不会发布它

标签： jquery height slidedown

【解决方案1】：

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

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

这个修复的问题在于它依赖于你能够打印出一个<br> 每个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/

【讨论】：