使用jQuery slideUp导致“跳跃”界面

Question

在下面的演示链接中，我正在使用jQuery slideUp，您会注意到它在向上滑动后，会快速跳转内容。

你知道为什么吗？我的html是有效的（除了没有标签属性的选项选项......我还在搞清楚...）。我的位置不正确吗？

http://demo.phppointofsalestaging.com/index.php

（点击登录 - ＆gt;销售 - ＆gt;显示项目网格然后隐藏项目网格以查看错误）

Answer 1

此内联样式

<div style="margin-top: 39px;" id="content">

和 unicorn.css的 724

#content {
   ...
   margin-top: -39px; 
   ...
}

......相互冲突。

如果同时删除两者，则页面不会跳转。

Answer 2

您在39px的内容margin-top上设置了div。这仅在您向下滑动项目网格时可见。由于这个边际，它在向后滑动时似乎会“跳跃”。尝试将边距设置为0px;

<div id="content" style="margin-top:0px;">

Answer 3

我玩了一下，这是由#content div上的margin-top:39px引起的，如果你删除了top:39px而不是margin-top:39px #content而不是它也不会抖动 - 但它也会导致按钮在slideUp和slideDown上跳一点，所以你需要调整按钮包装区的css，如下所示：

修复按钮跳跃问题：

#show_hide_grid_wrapper {
position: relative;
text-align: right;
padding: 10px;
}

Answer 4

如上所述。答案提及，您margin-top 39px上有#content。将其设置为0将解决问题，但它也将删除内容上方美丽的深灰色部分。要将其恢复，请将其添加到CSS：

#content:before {
content: '';
display: block;
width: 100%;
height: 39px;
background: YOUR GRAY COLOR;
}