Question

在将元素附加到父元素后，我一直遇到淡化元素的问题。

以下是我汇总的一些示例代码：（http://jsfiddle.net/XCKJf/）

// test with fadeTo and fadeIn
var wrap1 = $('<div>Wrap 1</div>');
wrap1.appendTo('#container');
wrap1.fadeTo(0, 0).fadeIn();

// test with fadeTo and fadeTo - WORKS
var wrap2 = $('<div>Wrap 2</div>');
wrap2.appendTo('#container');
wrap2.fadeTo(0, 0).fadeTo(500, 1);

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

// test with css opacity and fadeTo - WORKS
var wrap4 = $('<div>Wrap 4</div>');
wrap4.appendTo('#container');
wrap4.css('opacity', 0).fadeTo(500, 1);

wrap2和wrap4正确淡入，因为它们使用fadeTo()。 wrap1和wrap3不会淡入。没有错误抛出。

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

有人可以对此有所了解吗？

Answer 1

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

FadeIn使用“display：none”删除任何样式。

因此，您无法使用FadeTo“隐藏”的FadeIn显示某些内容。另一方面，你可以使用FadeOut，因为它的实现与FadeIn相反，在你的风格上加上“display：none”。

Answer 2

试试这个：

// 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);

在这里工作小提琴：http://jsfiddle.net/XCKJf/4/

我希望它有所帮助。

jQuery fadeIn不起作用，fadeTo工作

2 个答案: