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

时间:2011-09-01 16:36:53

标签: jquery height slidedown

在这里输入代码这个解决方案让我望而却步,不幸的是,能够在我正在处理的页面之外重现问题。

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

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

注意:在你因为小提琴而投票给我之前,请阅读其余部分。

小提琴代表了我正在努力实现的一个工作范例,但遗憾的是我无法重现这个问题。我正在处理的页面由于各种原因而不能在这里发布,这些理由并不理想但是如果有人之前遇到过这种情况,只要知道(以及他们对此做了什么)就会有所帮助。

对问题进行更深入的解释:

与小提琴相同的标记和CSS和脚本。 单击.header元素可向下滑动.child元素。 但是,.child的高度会动画到一个.child-item元素的高度,无论有多少'行'。完成此动画后,.child的高度将跳至保持所有.child-item个孩子所需的全高度。 然而,在小提琴上,它运作良好 - 任何想法?

P.S我知道不发布剩下的代码是一个问题,但它不受我的控制,我已经分享了我能做的事情并且尽我所能描述了问题。希望对于之前遇到过同样问题的人来说,这已经足够了,并且可能有助于指出原因。

1 个答案:

答案 0 :(得分:0)

这不是最好的答案,但我解决这个问题的方法是每隔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/