jQuery で appendとfadeInを同時に行う方法 (要素をアニメーションつけながら追加する)


Webデザイン入門オンライン講座 Udemy

jQueryの、”append”を使って、要素を追加する際、

”パッ”

っていう感じではなく、

”ぼわ〜ん”

っていう感じに表示させたい。

そんな時は、「メソッドチェーン」をつかって、シンプルに書けるのですが、多分初心者はハマるので、紹介しておきます。

まずはデモ画面

デモ画面へ

デモ画面にボタンが2つあり、両方押してみてください。

上の青いボタンはアニメーションが効かないappend。

【デモ画面キャプチャ】

下の赤いボタンは、アニメーションが聞いて、5秒間かけて少しずつ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を始めたばかりの時は結構理解しづらい部分だと思うので、さらっと覚えてしまいましょう。

あわせて読みたい