jQuery fadeIn()在display none上的应用

Question

我有一个div，我用$('#div').css('display','none');将其隐藏了。

现在，我想淡入这个div，但似乎$('#div').fadeIn()并没有起到作用，但我不想把显示设置回块状，因为如果这样做，它会立即重新出现而不是淡入。你有什么想法吗？

- automaton

---

你能让我们看看你正在使用的标记和代码吗？ - kinakuta

请提供您代码的片段。 - genesis

.hide() 真的让它起作用了吗？ - Felix Kling

Answer 1

试试看

$('#div').hide();

隐藏元素。

更新：我建议这么做是因为在Firefox中，在body 上设置 .css('display', 'none') 时遇到了问题。但它应该适用于其他元素。

但如果使用 hide() 不起作用，那么你肯定有其他问题，需要发布更多代码或提供演示。

在哪个浏览器上出现问题？你确定 $('#div').fadeIn() 被执行了吗？

- Felix Kling

---

这不是正确的答案，原因在于：除非使用hide()将其隐藏，否则无法启动隐藏对象。我认为对于需要通过CSS开始隐藏对象，然后在稍后向用户呈现它的人来说，这是一个实际的错误。 - somid3

嘿，我刚从另一个问题的链接中发现了这个... OP似乎同意这个解决方案...你有关于这个行为的更多信息吗...调用hide()会将display设置为none，不是吗？ - Arun P Johny

Answer 2

虽然晚了4年，但我希望这至少能帮到某些人。

你需要使用jQuery先将CSS类更改为visibility:hidden，然后应用淡入函数。你可以在同一个函数中链接它们，也可以分开运行。无论哪种方式，你都应该看到元素按预期淡入回来。

- Ash

Answer 3

请尝试

$('#div').hide();

替代

display:none;

- Jose Faeti

Answer 4

只需添加速度选项；

$('#div').fadeIn(1000);

它对我有效...

- Enes Tanrıöver

Answer 5

我曾经遇到过类似的问题，是由于CSS设置了元素及其:hover状态所致。

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

我删除了上面的那些行，最终jquery的fadeIn()完美地运行了。

同时确保不要使用display:none !important;

是的，你只需要设置CSSdisplay:none;然后使用fadeIn()即可。

- Avatar