Javascript jQuery fadeIn不'；不行，法德托也行

在将元素附加到父元素后，我一直遇到元素褪色的问题

下面是我编写的一些示例代码：（）

//使用fadeTo和fadeIn进行测试
var wrap1=$（'Wrap 1'）；
wrap1.appendTo（“#container”）；
wrap1.fadeTo（0,0.fadeIn（）；
//使用fadeTo和fadeTo进行测试-有效
var wrap2=$（'Wrap 2'）；
wrap2.appendTo（“#container”）；
wrap2.fadeTo（0,0），fadeTo（500,1）；
//使用css不透明度和fadeIn进行测试
var wrap3=$（'Wrap 3'）；
wrap3.appendTo（“#container”）；
css（'opacity'，0）.fadeIn（）；
//使用css不透明度和fadeTo进行测试-有效
var wrap4=$（'Wrap 4'）；
wrap4.appendTo（“#container”）；
css（'opacity'，0）.fadeTo（500,1）；

wrap2

和

wrap4

正确淡入，因为它们使用

fadeTo（）

wrap1

和

wrap3

不会淡入。没有抛出错误

显然，我可以继续使用fadeTo，但据我所知，这4个元素都应该淡入，所以我真的很想知道它为什么会这样

---

有人能解释一下吗？

FadeTo所做的是添加一个样式，将其不透明度设置为0

FadeIn所做的是删除带有“display:none”的任何样式

所以你不能用FadeIn显示用FadeTo“隐藏”的东西。另一方面，您可以使用FadeOut，因为它的实现与FadeIn相反，为您在样式上添加“display:none”。

尝试以下方法：

// test with fadeTo and fadeIn

var $container = $('#container');

var wrap1 = $('<div>Wrap 1</div>');
wrap1.fadeIn(1500).appendTo($container);

// test with fadeTo and fadeTo
var wrap2 = $('<div>Wrap 2</div>');
wrap2.fadeIn(2000).appendTo($container);

// test with css opacity and fadeIn
var wrap3 = $('<div>Wrap 3</div>');
wrap3.fadeIn(2500).appendTo($container);

// test with css opacity and fadeTo
var wrap4 = $('<div>Wrap 4</div>');
wrap4.fadeIn(3000).appendTo($container);

//使用fadeTo和fadeIn进行测试
var$container=$（“#container”）；
var wrap1=$（'Wrap 1'）；
wrap1.fadeIn（1500）。附录（$container）；
//使用fadeTo和fadeTo进行测试
var wrap2=$（'Wrap 2'）；
wrap2.fadeIn（2000年），附录（$container）；
//使用css不透明度和fadeIn进行测试
var wrap3=$（'Wrap 3'）；
wrap3.fadeIn（2500）。附件（$container）；
//使用css不透明度和fadeTo进行测试
var wrap4=$（'Wrap 4'）；
wrap4.fadeIn（3000）.appendTo（$container）；

在这里演奏小提琴：

---

我希望它能有所帮助。

在您的wrap3中，如果在调用“fadeIn（）”之前使用“.css（'display'，'none'）”而不是“opacity”，它可能会起作用。我理解您的意思，但在这种情况下它似乎仍然应该起作用。FadeIn使用不透明度使元素淡入，因此如果事先将元素设置为

opacity:0

，应该没有关系，对吧？该元素从未被设置为

display:none

，因此这不应该是一个问题。或者我没有正确地理解你？啊，那么你是说要让fadeIn工作，它需要元素by be

display:none

？看起来你是对的。谢谢不过，fadeIn要求将元素设置为

display:none

，这对我来说毫无意义。对于任何正在阅读的人，它还可以将其更改为

wrap1.hide（）.fadeIn（）

。是。这就是我要说的：）你可以在这里检查：我更新了你的JSFIDLE，这样它就可以工作了。我的想法是。fadeTo指定不透明度，但是。fadeIn专门用于取消隐藏元素。因此，从不透明度0淡入淡入将不适用于.fadeIn，但如果您使用display:none.fadeIn将起作用，而.fadeTo则不会正确。看来是这样的是的，就是这样。菲利佩在下面回答。我认为jQuery团队确实需要重新考虑这个功能

fadeIn

的名字非常直白，因此我认为它应该淡入一个不依赖于设置的

display:none

的元素中。这非常有趣。为什么

wrap1.fadeIn（1500）.appendTo（$container）工作，但
wrap1.appendTo（$container）.fadeIn（1500）不工作？对不属于DOM的元素调用fadeIn不应该失败吗？此fadeIn函数令人困惑。@Gavin:：：元素应该首先注入DOM，然后对其应用淡入淡出。实际上，我并不是说它应该失败，因为很明显，动画队列在处理appendTo之后才会启动。我猜fadeIn的工作原理是元素必须在文档流之外，否则它就无法工作。我不同意这种功能，但我很高兴我现在明白了。谢谢。我想你的意思正好相反，对吗？应用淡入淡出，然后将其插入DOM。
// test with fadeTo and fadeIn

var $container = $('#container');

var wrap1 = $('<div>Wrap 1</div>');
wrap1.fadeIn(1500).appendTo($container);

// test with fadeTo and fadeTo
var wrap2 = $('<div>Wrap 2</div>');
wrap2.fadeIn(2000).appendTo($container);

// test with css opacity and fadeIn
var wrap3 = $('<div>Wrap 3</div>');
wrap3.fadeIn(2500).appendTo($container);

// test with css opacity and fadeTo
var wrap4 = $('<div>Wrap 4</div>');
wrap4.fadeIn(3000).appendTo($container);