Question

我开始使用jQuery UI“show（）”方法（动画称为“剪辑”）初看起来与jQuery的典型边缘相关的抖动问题。然而，首先，盒子向下滑得太远，然后再次“猛拉”（通常当它的边缘相关时，盒子大部分向下滑动然后“猛拉”其余部分以容纳边缘）。而且，它只发生在非常特殊的情况下。有问题的页面：

有许多使用CSS的隐藏DIV。它们是使用导航显示的。可以使用“X”图标再次隐藏DIV。该错误只发生在“配置文件”DIV和“你好”DIV上。在“hello”DIV中，它不会因为jScrollPane被激活而混蛋，但是你可以看到出现了问题，因为内容底部有一个巨大的差距，不应该存在。

奇怪的是，这个bug只发生过一次。此外，只有在事先没有透露其他DIV时才会发生这种情况。如果您单击“标签”然后单击“配置文件”，则不会发生错误。只有在首先点击“个人资料”时，才会发生，然后再次点击。

这个错误发生在FF和Chrome中，而不是IE9，这让我认为它必须与CSS渲染有关，但事实上它只在某些情况下发生让我非常困惑。

我意识到这是一个非常具体的问题，但我希望有人能够对此有所了解！

请随意批评我的编码和其他任何内容，我来这里学习。

Answer 1

解决了导致闪烁的原因。谷歌字体在渲染时会闪烁一秒钟。这意味着它只发生一次，因为在它们被加载（在任何DIV中）之后，它们不再发生这种闪烁。显然这被称为FOUT（无格式文本的Flash）。

要修复它我只是在文档中加载一个不可见的标题标签（我使用谷歌字体作为标题），这足以让它在第一个DIV打开时呈现字体而不会闪烁。有点凌乱，但有诀窍。

$("body").append('<h1 style="visibility:hidden">M</h1>');

Answer 2

当盒子打开时，我没有看到任何抽搐问题。我正在使用Chrome，显示和扩展似乎在我的最终工作正常。或许我正在读错你的问题。当盒子扩展时你有问题吗？它看起来很顺利。

我注意到在打开的某些面板上，“最小化按钮”和“关闭”按钮是相反的。这有点令人困惑。

Answer 3

尝试使用样式设置为position：relative的div来解决问题隐藏的div。

<div style="position:relative;">
    <div id="hello" class="window  large">
        hello contents here
    </div>
</div>

我过去曾经多次遇到过这个问题，似乎围绕隐藏的div位于相对非隐藏div的位置为我解决了问题。