jQuery で appendとfadeInを同時に行う方法 （要素をアニメーションつけながら追加する）
jQueryの、”append”を使って、要素を追加する際、
”パッ”
っていう感じではなく、
”ぼわ〜ん”
っていう感じに表示させたい。
そんな時は、「メソッドチェーン」をつかって、シンプルに書けるのですが、多分初心者はハマるので、紹介しておきます。
まずはデモ画面
デモ画面にボタンが２つあり、両方押してみてください。
上の青いボタンはアニメーションが効かないappend。
【デモ画面キャプチャ】
下の赤いボタンは、アニメーションが聞いて、５秒間かけて少しずつfadeInさせている。
【デモ画面キャプチャ】
書き方
appendとfadeInを同時に行いたい時の書き方は以下の通り。
まずは、html。要素を追加したい場所は、pタグ（id=”fadein_result”）です。
ボタンを押したら、この要素内にテキストが追加されるようにします。
<h2 id="index">fadeInが効いているappend</h2> <button id="fadeinok">要素追加！！</button> <p id="fadein_result"> </p>
続いて、JS（jQuery）。
$(function(){
var fdin_cont = "<div class='appendtexts'>要素をfadeInアニメーションで追加したよー</div>";
//追加したい要素を変数に入れるとスッキリする。
$('#fadeinok').click(function() { //ボタンクリックしたら
$(fdin_cont).appendTo("#fadein_result").hide().fadeIn(5000);
//変数に入れたものを親要素に追加。すぐに隠して、5秒かけて表示。
});
});
これで、appendと同時に、fadeInできます。
解説
上記をもう少しわかりやすく書くと
$(追加したい要素).appendTo(追加先の親要素).hide().fadeIn(5000);
ということになります。
“appendTo”は、文字通り、「〇〇へ追加する」というものです。わかりやすいですね。
続けて、”.hide()”。
これは、メソッドチェーンといって、メソッド（命令）を繋げていく（チェーン）書き方です。
例えば、
A().B().C()
ってかいたら、”Aして、Bして、そんでもってCして”という命令になります。
つまり、「appendToしたら、次に、hideしてねん」 というのが上記の命令になります。
追加したものをなぜ隠すのか、って一瞬思うかもしれませんが、「append」は命令したらすぐに要素を追加し、表示してしまいます。
そうすると、fadeInする暇をあたえずに表示しっぱなしになってしまうんですね。
なので、
「追加（append）したら、一旦隠して(hide)、そんでもって、ゆっくり表示して（fadeIn）」という命令の繋がりが必要になるわけです。
引っかかりやすい書き方
こんな書き方でもよいのでは、と思うかもしれません。
var fdin_cont = "<div class='appendtexts'>要素をfadeInアニメーションで追加したよー</div>";
$("#fadein_result").append("fdin_cont").hide().fadeIn(5000);
実際、今回のデモ画面の事例で言えば、動きます。
しかし例えば、
<h2 id="index">fadeInが効いているappend</h2> <button id="fadeinok">要素追加！！</button> <p id="fadein_result"> <div>あらかじめ用意している文章よ！</div> </p>
みたいな感じで、追加したい要素内にあらかじめ別の要素があった場合、全て一旦hideして、fadeInするので、やりたい動きにならない可能性が出てきます。
一度理解すれば簡単なのですが、jsやjQueryを始めたばかりの時は結構理解しづらい部分だと思うので、さらっと覚えてしまいましょう。
