Question

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

这是展示我的意思的小提琴：http://jsfiddle.net/Complexity/um9xj/ 我将持续时间设置为700仅用于测试目的

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

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

Answer 1

试试这个：

<强> Demo

看起来这是动画下来的，margin-top被应用并且它会向下跳转一个像素。

编辑 - 左边框问题看起来是因为您将menucontents元素left:-4px定位在menu元素之外。在您执行slideDown（）动画并且它自动将menu设置为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。你的margin-top: -1px已经过动画，但只能是1或0，这就是为什么它跳了一半。摆脱margin-top将解决这个问题。如果您想避免更改CSS，可以覆盖边距编辑，如下所示：

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

在动画的每一帧中调用progress函数，并将覆盖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; *
    ...

jQuery SlideDown和Border - 奇怪的跳跃

2 个答案: