web-dev-qa-db-ja.com

フェードインと追加の使用

JSONデータをページに読み込んでappendTo（）を使用していますが、結果をフェードインしようとしています。

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

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

私もこれを試しました：

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

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

しかし、JSON値の1つとして「未定義」になります。

javascriptjqueryfade
74
Coughlin

追加する前にコンテンツを非表示にして、それに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();
169
Kevin Gorski

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

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に設定して表示されないようにし、その後フェードインします。

7
Parand

これで問題が解決するはずです。

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

代わりに追加を行う場合は、代わりに：lastセレクターを使用する必要があります。

4
Firas

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

_
   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(); 
   });
_
3
Kent Fredric
$(output_string.html).fadeIn().appendTo("#list");
3
Ball_cs

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

.new {display:none}

javascriptは次のようになります。

$('#content').append('<p class='new'>Hello!</p>');
$('#content').children('.new').fadeIn();
$('#content').children.removeClass('new');
$('#content').children('.new').hide();
2
Michael Martin

最初に、受信したデータをjQueryオブジェクトに変換します。次に、すぐに非表示にします。第三に、ターゲットノードに追加します。そして、結局のところ、fadeInのように、必要なアニメーションを明確に使用できます:)

jNode = $("<div>first</div><div>second</div>");
jNode.hide();
$('#content').append(jNode);
jNode.fadeIn();
1
Sam

私はあなたが言ったことをやったがうまくいかなかった。次のコードで動作した

$("div").append("content-to-add").hide().fadeIn();
0
Emanuel Silva

私はこれのために、高価です：

$("dt").append(tvlst.ddhtml);
$("dd:last").fadeIn(700);
0
slboat