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」でスタイルを削除することです。

したがって、FadeTo で「隠した」ものを FadeIn で表示することはできません。一方、FadeOut を使用することもできます。その実装は、スタイルに「display: none」を設定する 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 に答える