jQuery SlideDown和边框-奇怪的跳转

Question

当我在具有边框的元素上使用jQuery的SlideDown功能时，确实出现了奇怪的跳转问题。

这是用来说明我的意思的小提琴： http : //jsfiddle.net/Complexity/um9xj/为了进行测试，我将持续时间设置为700

$(element).slideDown({
    duration: 700
}).parent().addClass("active");

当您单击新项目按钮时，您会看到我的意思。 我希望有一个非常简单的解决方案。

Answer 1

尝试这个：

演示版

看起来像是向下动画，应用了margin-top并向下跳了一个像素。

编辑 -左边框问题似乎是因为您将menucontents元素定位在left:-4px位置，因此将其放置在menu元素之外。 直到您执行slideDown（）动画，并自动将menu设置为overflow:hidden ，这才成为问题overflow:hidden一个简单的解决方法是将位置移动到父元素。

CSS：

.icon .menu { 
   box-shadow: 0 0 0 #888; 
   display: none; 
   left:0px;
   top: 60px;
  /* margin-top:-1px; */
}

.menucontents {
  //other styles

 /* left: -4px */
}

Answer 2

jQuery slideUp和slideDown动画为内容框的height设置动画，即margin-top ， margin-bottom ， padding-top和padding-bottom的height 。 您的页margin-top: -1px正在设置动画，但只能是1或0，这就是为什么它跳到一半的原因。 摆脱margin-top将解决此问题。 如果您希望避免更改CSS，则可以覆盖边距编辑，如下所示：

$(element).slideDown({
    duration: 700,
    progress: function(){$(element).css('marginTop', '-1px')}
}).parent().addClass("active");

进度函数被称为动画的每一帧，并将覆盖jQuery对您的空白的更改

编辑：我尝试过尝试覆盖溢出，但是由于我无法确定的原因，它无法正确呈现。 我建议您对第二个问题进行CSS编辑。 由于您要放置菜单，因此只需使用最外面的div来修改您的位置，然后让内部的div只担心内容：

.icon .menu {
    box-shadow: 0 0 0 #888;
    display: none;
    left: 0;
    margin-top: -1px;
}

.menucontents {
    padding: 1px;
    padding-left: 2px;
    z-index: 100;
    background-color: white;
    /* left: -4px; *
    ...