javascript - 为什么 jQuery show() 在取消隐藏 div 时会导致短暂但明显的抖动？

Question

我试图在用户第一次单击提交按钮时在表单上显示隐藏的 div。虽然我使用 jQuery 进行此工作，但如果我为 show() 过渡期设置 0 以外的任何值，正在显示的 div 将“抽搐”到一边。

这是使用 Bootstrap 并在 Safari 上测试的。

我认为问题可能出在表单上的 margin: 0 auto (就好像 jQuery 显示元素后边距对齐一样)。

Here's the JSFiddle这说明了这个问题。

Answer 1

这是因为 jQuery 的动画包装器。 jQuery 将要进行动画处理的元素放入另一个用于动画的 div 帮助器中。

这个包装器(几乎)每次都会弄乱动画元素的边距。

我更改了此规则:

#signup-form .form-group {
    margin: 10px 0 10px 0;
}

对此:

#signup-form .form-group {
    margin: 0 0 10px 0;
}

删除上边距。

jQuery 动画在元素周围添加了一个包装器，该包装器在动画进行时会消除顶部边距。一旦动画结束，jQuery 就会展开元素，并应用边距，从而创建跳转。

这是一个 updated JSFiddle demo 。