怪异的jQuery行为 - slide（） [英] Weird jQuery behavior - slide()

问题描述

如果您转到此页面并点击左侧下拉列表中的一个 - http：/ /ryancoughlin.com/hp/index.php?c=about - 一旦它到达底部或骑回到顶部，它几乎看起来像是毛刺/撞击。

有可能解决这个问题吗？

  
 
 
 < $（。menu-header）。click（function（）{
 $（this）.next（）。toggle（'slow'）; 
 return false; 
}）。 next（）。hide（）; 
  

解决方案

在您的CSS中，更改

  #left ul li {
 font-size：.7em; 
 margin：5px 0; 
} 
  

到

  #left ul li {
 font-size：.7em; 
 padding：2px 0 3px 0; 
} 
  

问题是，您的利润是折叠的， $ c> h2 在动画的开头和结尾，但不是在动画期间，因为 ul的 overflow 不是可见 *，防止折叠。缺少折叠会增加 ul 的有效大小。

* W3上盒模型和边距合拢：

overflow之外的visible元素的垂直边距不会与其流内子项折叠。

if you go to this page and hit one of the left dropdowns - http://ryancoughlin.com/hp/index.php?c=about - it almost looks like it is glitching/bumping, once it gets to the bottom or rides back up top.

Is it possible to fix this? Or is this how it behaves in jQuery?

CODE:

$(".menu-header").click(function() {
    $(this).next().toggle('slow');
    return false;
}).next().hide();

解决方案

In your CSS, change

#left ul li{
    font-size:.7em;
    margin:5px 0;
}

to

#left ul li{
    font-size:.7em;
    padding:2px 0 3px 0;
}

The issue is that your margins are collapsing with the margins of the h2 at the beginning and end of the animation, but not during the animation, because overflow of the ul is not visible*, preventing the collapsing. The lack of collapsing increases the effective size of the ul.

*W3 on the box model and margin collapsing:

Vertical margins of elements with 'overflow' other than 'visible' do not collapse with their in-flow children.

这篇关于怪异的jQuery行为 - slide（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！