jQuery SlideDown在Firefox中闪烁问题

Question

再次出现jQuery和Firefox闪烁问题。 （在IE6/7/8，Safari中没有闪烁）

我在这里上传了一个示例页面： http://sithlord.bplaced.net/testing/jquery_flickering/flickering.html 有两个div容器。内部的div是我要隐藏的。 外部的是带有样式元素的包装容器。 我发现只有在选择框中才会出现闪烁。没有SelectBox就不会闪烁。

但这还不是全部： （我不能发布第二个超链接：它与上面相同；只需将“flickering.html”更改为“not_flickering.html”）

在这种情况下，我选择了较低的“option” - 正如您所看到的，在这种情况下，闪烁消失了。 当总选项少于约20个时，情况也是如此。

我找到的唯一解决方法是删除selectbox :)

有什么想法，为什么会发生这种情况，以及如何修复它？

谢谢！

- Sithlord

---

现代Firefox处理CSS的已知问题 https://bugzilla.mozilla.org/show_bug.cgi?id=787647 - hinekyle

Answer 1

直接应用overflow:hidden;到包含的div上可以起作用。

- Boss Ninja

Answer 2

我有点晚了，但我遇到了类似的问题。我的解决方案是：在动画之前将选择器设置为display:none，然后在动画之后设置为display:block。例如：

 $("div#hidden").hide();
  $("a").click(function(e) {
    e.preventDefault();
    $("div#hidden select").css('display','none');
    $("div#hidden").slideDown(1000);
    $("div#hidden select").css('display','block');
    });
});

如果你想的话，也可以使用jQuery的show/hide函数。

- Ben Liyanage

Answer 3

发现了这个帖子。尝试在隐藏的div上设置宽度或高度。我注意到你的div上没有样式，所以这可能有效。

大都市

- Metropolis

---

嗨Metropolos，感谢您的回答。您是指像这样的东西吗？ http://sithlord.bplaced.net/testing/jquery_flickering/hidden_select_appended.html但现在你会得到另一个不好的效果。你会看到选择框出现。 而且仍然有一个问题，为什么大的隐藏选择框会出现闪烁 :)问候 Sithlord - Sithlord

宽度和高度没有帮助。还是闪烁。 - Sithlord

还要尝试将overflow: hidden;添加到隐藏元素中。 - Metropolis

我已经尝试了overflow: hidden的“技巧”，但没有用。 'p'元素仅用于测试。可以是span，div或其他任何东西。没有区别。我认为问题出在选择框上。为什么呢？ - Sithlord

Answer 4

请查看 http://dev.jquery.com/ticket/5743，了解jQuery通常可以实现这样的事情的原因。简而言之，虽然css函数在没有参数的情况下声称只返回值而不更新任何内容，但在某些情况下，它实际上会更新DOM。

- user250343