Javascript jQuery向下滑动和边界-奇怪的跳跃

当我在有边框的元素上使用jQuery的SlideDown特性时，我确实遇到了一个奇怪的跳转问题

这里有一把小提琴来演示我的意思： 我将持续时间设置为700只是为了测试

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

当你点击NewItems按钮时，你会看到我所说的行为。 我希望有一个非常简单的解决方案。

试试这个：

这看起来像是在向下设置动画时，应用了

边距顶部

，并向下跳转一个像素

编辑-左边框问题看起来是因为您正在定位

menucontents

元素

left:-4px

，这将其置于

菜单

元素之外。在执行slideDown（）动画并自动将

菜单设置为
溢出：隐藏之前，这不是问题。一个简单的修复方法是将定位移动到父元素

CSS:

jQuery幻灯片上下滑动动画为内容框的
高度
、
页边距顶部
、
页边距底部
、
填充顶部
、和
填充底部
设置动画。您的
页边距顶部：-1px
正在设置动画，但只能为1或0，这就是为什么它在中途跳跃。去掉
页边距顶部将解决此问题。如果希望避免更改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; *
    ...

嘿，这几乎是正确的，但似乎还有一个左边边框的bug。左边框仅在动画完成时显示。你知道怎么解决这个问题吗？再次谢谢，但如果我现在看小提琴，菜单的位置就不正确了。我希望菜单显示在左边和底部，就像它是一样，随着你的改变-1px和4px的位置已经改变，这不是一般的想法。很抱歉，但是您认为您还有其他解决方案吗？添加
left:0到第一个CSS类，您的解决方案就可以工作了。有没有可能更新演示？提供的链接返回404。谢谢。好的，我觉得我要用你的方法来解决问题了，不幸的是，左边框只在动画完成时显示。有没有办法解决这个问题？
.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; *
    ...