2

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

这是我放在一起的一些示例代码：（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个元素都应该淡入，所以我真的很想知道它为什么会这样。

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

4

2 回答 2

1

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

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

因此，您无法使用 FadeIn 显示已被 FadeTo “隐藏”的内容。另一方面，您可以使用 FadeOut，因为它的实现与 FadeIn 为您在样式上放置“显示：无”相反。

于 2013-09-09T16:00:51.373 回答
1

尝试这个：

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

我希望它有所帮助。

于 2013-09-09T16:08:48.167 回答