jQueryで append した要素を fadeIn させたい

ajax とかで持ってきたコンテンツを #content_body とかに放り込んで、それをフェードインで表示させたいなーって思ったんですが、やりかたがよくわからなくてハマったのでメモ。

とりあえず、ajax 部分は省きますが、読み込んで、正常にデータがかえってきたとして、

success: function(result) {
	＄（’#content_body').append('<article>'+ result +'</article>').fadeIn(2500);
}

とか書いてみたんだけど、これだと当然というかなんというか、一番最初にいる #content_body が fadeIn しようとします。

でも本当は読み込んだ（appendした）要素に対して個々にフェードさせたい。
以前、append した要素にイベントを紐付ける方法を記事にしたこともありましたがそれもうまくいかず…。

で、更にいろいろ調べたり試したりしてみたところ、append じゃなくて appendTo を使えば思ったように動かすことができました。

append した要素をフェードインさせる方法

つまり、

$('<article>'+ result +'</article>').appendTo('#content_wrap').hide().fadeIn(2500);

これなら動く、と。

要は最初に書いたやつは「親要素を基準」に書いていたのに対し、「追加する要素基準」に書くことで、無事追加要素がフェードするようになったってことですね。

この部分の内容を言葉にしてみるとわかりやすいかも。

最初の間違っていた書き方だと

ってなってましたが、正しく動いた書き方だと、

因みに、フェード処理まで含めて変数に入れちゃって、その変数を append するって手もあるそうです。

var article = $('<article>'+ result +'</article>').hide().fadeIn(2500);
$('#content_wrap').append(article);

2行にわかれますが、appendTo ではなく append で行うことができますので、append と appendTo がごっちゃになるのが嫌だから append に統一したいって場合はアリかも？