ajax とかで持ってきたコンテンツを #content_body とかに放り込んで、それをフェードインで表示させたいなーって思ったんですが、やりかたがよくわからなくてハマったのでメモ。
とりあえず、ajax 部分は省きますが、読み込んで、正常にデータがかえってきたとして、
1 2 3 |
success: function(result) { $(’#content_body').append('<article>'+ result +'</article>').fadeIn(2500); } |
とか書いてみたんだけど、これだと当然というかなんというか、一番最初にいる #content_body が fadeIn しようとします。
でも本当は読み込んだ(appendした)要素に対して個々にフェードさせたい。
以前、append した要素にイベントを紐付ける方法を記事にしたこともありましたがそれもうまくいかず…。
で、更にいろいろ調べたり試したりしてみたところ、append じゃなくて appendTo を使えば思ったように動かすことができました。
append した要素をフェードインさせる方法
つまり、
1 |
$('<article>'+ result +'</article>').appendTo('#content_wrap').hide().fadeIn(2500); |
これなら動く、と。
要は最初に書いたやつは「親要素を基準」に書いていたのに対し、「追加する要素基準」に書くことで、無事追加要素がフェードするようになったってことですね。
この部分の内容を言葉にしてみるとわかりやすいかも。
最初の間違っていた書き方だと
- 親要素に対して…
- (親要素に)result の内容を追加
- (親要素に)フェードインを指示 ←あれあれ??
ってなってましたが、正しく動いた書き方だと、
- result を読み込んだ追加要素に対して…
- (追加要素に)自分自身を親要素に追加し、即非表示
- (追加要素に)フェードインを指示 ←そう!これこれ!
別の書き方
因みに、フェード処理まで含めて変数に入れちゃって、その変数を append するって手もあるそうです。
1 2 |
var article = $('<article>'+ result +'</article>').hide().fadeIn(2500); $('#content_wrap').append(article); |
2行にわかれますが、appendTo ではなく append で行うことができますので、append と appendTo がごっちゃになるのが嫌だから append に統一したいって場合はアリかも?
コメントする