【超簡単！】jQueryで順番にアニメーションを行う方法！

はじめに

複数のアニメーションを実装した時に一つのアニメーションが終わった後に次のアニメーションを実装したい時ってありますよね。

普通に処理を書くだけだと同時に実行されてしまう。

どうにかならんものかと思い調べました。

方法はかなりたくさんあったのですが今回は一番簡単だと思うものだけを紹介していこうと思います。

コールバック関数を使う

方法は簡単でコールバック関数というものを使います。

コールバック関数とは簡単にいうとこの処理の次に次の処理をしてねというものです。

実際の例をみてみる

実際にコードの例をあげてみます。

今回実装したいのは

$('.name').fadeIn(4000,);

$(".intro").textillate();

下のtextillateはjavascriptのアニメーションのプラグインであるTextillate.jsの記述になります。

詳細が知りたい方は以下にリンクを貼っておくのでどうぞ。

textillate.js

<h1 class="name">Daiki Nakajima</h1>
<p class="intro">Backend engineer / Frontend engineer <br>ウェブサイトを作る職人です。</p>

ちなみにそれぞれのクラスに該当するのはこの二つ。やりたいことはまず自分の名前を4秒かけてフェードインしたあとに自分の詳細をテキストイレータで表示する。

実際にコールバックを使ってみる

では実際にコールバックを使ってみることにします。

$(function(){

  $('.name').fadeIn(4000,textillate);
  function textillate(){
    $(".intro").textillate({
      in: {
        effect: 'fadeInLeftBig',    // エフェクトの指定
        delayScale: 2.0,    // 遅延時間の指数
        delay: 50,  // 文字ごとの遅延時間
        sync: false,    // アニメーションをすべての文字に同時に適用
        shuffle: true, // 文字のランダム表示
        reverse: false, // エフェクトを逆に再生（「sync:true」のときは不可）
    },
    });
  }
});

こんな感じですね。

で、実際に動かしてみると、

あれ？アニメーションはうまくいっているのですが、<p>タグの文字が最初から表示されている状態から <h1>タグのアニメーションが終了した後にもう一回アニメーションされている。 つまり、最初から<p>タグの文字が表示されている。 と、ここでcssでdisplay; none:をして最初は隠してみるとどうだろうか。 うーん、、、 うまく表示されない。

テキストイレータはcssで隠すとダメなのかなあ、、、 未だ未解決のままです。 詳しい方いたら教えてください。

今回はコールバックについて

締まりが悪いですが今回はコールバック関数についてなのでコールバック関数についてはしっかり説明できたと思います。 ではでは。。。