74

JSON データをページにロードして使用していますappendTo()が、結果をフェードインしようとしていますが、何かアイデアはありますか?

$("#posts").fadeIn();
$(content).appendTo("#posts");

ドキュメントでappendとの間に違いがあることがわかりました。appendTo

私もこれを試しました：

$("#posts").append(content).fadeIn();

私はそれを手に入れました、上記はトリックをしました！

しかし"undefined"、私は JSON 値の 1 つとして取得します。

4

9 に答える 9

169

追加する前にコンテンツを非表示にして、それに fadeIn メソッドをチェーンすると、探している効果が得られるはずです。

// Create the DOM elements
$(content)
// Sets the style of the elements to "display:none"
    .hide()
// Appends the hidden elements to the "posts" element
    .appendTo('#posts')
// Fades the new content into view
    .fadeIn();
于 2008-11-29T16:49:28.520 に答える
7

あなたが抱えている問題を完全に理解しているかどうかはわかりませんが、次のようなことがうまくいくはずです:

HTML:

<div id="posts">
  <span id="post1">Something here</span>
</div>

Javascript:

var counter=0;

$.get("http://www.something/dir",
    function(data){
        $('#posts').append('<span style="display:none" id="post' + counter + ">" + data + "</span>" ) ;
        $('#post' + counter).fadeIn();
        counter += 1;
    });

基本的に、コンテンツの各部分 (各「投稿」) をスパンでラップし、そのスパンの表示を none に設定して表示されないようにしてから、フェード インします。

于 2008-11-29T17:21:02.433 に答える
4

これで問題は解決すると思います。

$('#content').prepend('<p>Hello!</p>');
$('#content').children(':first').fadeOut().fadeIn();

代わりにappendを実行している場合は、代わりに：lastセレクターを使用する必要があります。

于 2010-02-19T21:56:43.960 に答える
3 
$(output_string.html).fadeIn().appendTo("#list");
于 2012-10-07T10:55:31.347 に答える
3

コードが直線的に実行されないことに注意する必要があります。アニメーション化されたものは、コードの実行を停止してアニメーションを実行してから戻ることは期待できません。


   commmand(); 
   animation(); 
   command();

This is because the animation uses set timeout and other similar magic to do its job and settimeout is non-blocking.

This is why we have callback methods on animations to run when the animation is done ( to avoid changing something which doesn't exist yet ) 

   command(); 
   animation( ... function(){ 
      command(); 
   });
于 2008-11-29T16:54:50.847 に答える
2

定義されたcssに次のものがあると仮定します。

.new {display:none}

そしてjavascriptは次のようになります：

$('#content').append('<p class='new'>Hello!</p>');
$('#content').children('.new').fadeIn();
$('#content').children.removeClass('new');
$('#content').children('.new').hide();
于 2011-07-17T13:03:37.940 に答える
1

まずは受け取ったデータをjQueryオブジェクトに変換します。次に、すぐに非表示にします。3 番目に、それをターゲット ノードに追加します。そして、このすべての後、フェードインのように、必要なアニメーションを明確に使用できます:)

jNode = $("<div>first</div><div>second</div>");
jNode.hide();
$('#content').append(jNode);
jNode.fadeIn();
于 2011-12-23T18:40:59.427 に答える
0

私はこれのために、高価を持っています：

$("dt").append(tvlst.ddhtml);
$("dd:last").fadeIn(700);
于 2012-07-31T16:42:04.140 に答える
0

あなたが言ったことを試してみましたが、うまくいきません。 次のコードで動作しました 

$("div").append("content-to-add").hide().fadeIn();
于 2018-04-05T04:28:01.307 に答える