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

Question

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

这是使用 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 .