在这里输入代码这个解决方案让我望而却步,不幸的是,能够在我正在处理的页面之外重现问题。
我的问题是:有没有人有关于jQuery高度动画的任何信息(例如slideUp(),slideDown()或slideToggle())动画部分动画然后“跳跃”其余部分,以及导致它的原因?
我有一个小提琴:http://jsfiddle.net/d7tbh/
注意:在你因为小提琴而投票给我之前,请阅读其余部分。
小提琴代表了我正在努力实现的一个工作范例,但遗憾的是我无法重现这个问题。我正在处理的页面由于各种原因而不能在这里发布,这些理由并不理想但是如果有人之前遇到过这种情况,只要知道(以及他们对此做了什么)就会有所帮助。
对问题进行更深入的解释:
与小提琴相同的标记和CSS和脚本。
单击.header
元素可向下滑动.child元素。
但是,.child
的高度会动画到一个.child-item
元素的高度,无论有多少'行'。完成此动画后,.child
的高度将跳至保持所有.child-item
个孩子所需的全高度。
然而,在小提琴上,它运作良好 - 任何想法?
P.S我知道不发布剩下的代码是一个问题,但它不受我的控制,我已经分享了我能做的事情并且尽我所能描述了问题。希望对于之前遇到过同样问题的人来说,这已经足够了,并且可能有助于指出原因。
答案 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/