jqueryアニメーションでよく使う式を紹介します！

最近jqueryを使ってアニメーションを実装する機会がありました。
サーバサイドのプログラムをメインでやっていた僕にとって、少し苦手意識があったjqueryだったのですが改めて使い方を調べ直しました。
すると、jqueryアニメーションを作るには最低限覚えておくといい式があることに気づきました。
今回はそんなjqueryアニメーションを実装する上で、よく登場する式をいくつか紹介したいと思います。

アニメーションを作る上で前提の考え方として、「どのタイミングで」と「何をするか」を意識しておきましょう。

まず上のソースコードをコピー＆ペーストしてindex.htmlデータを作成してください。 その後、「// ここに【どのタイミングで】を書く」の場所に以下の処理を追加していきます。
※４行目でjqueryを読み込んでいますが、まずはこれがないと始まりません！

【どのタイミングで】

クリックやスクロールなど、何かが行われた時にアニメーションはスタートします。
そんな、アニメーションを起こすきっかけとなるトリガーとしてよく使用される式を挙げてみます。

1.ある要素がクリックされた時

input等のボタンを押したり、ある領域がクリックされたりした時にイベントを発生させる時に使用されるのがclickメソッドです。

$("#sample").click(function () {
  // ここに「何をするか」を書く
});

↑ 要素(#sample)がクリックされた時にイベントが発生。

2.スクロールしてある地点に到達した時

ここ数年で定番になった、スクロールが進むごとに画像やテキストが現れるようなページは、scrollの中で今現在のスクロール位置を取得することで、ある場所を越えたらイベントが発生するような仕組みが作れます。

$(window).scroll(function() {
  if($(window).scrollTop() >= 100) {
    // ここに「何をするか」を書く
  }
});

↑ スクロール位置が100px以上になった時にイベントが発生。

3.カーソルがある要素に乗った時（マウスホバー）

今ではネット閲覧をするなら、何かしらの形で見たことがあるであろうマウスホバーのアニメーションですが、それらはmouseoverの中で行うことができます。

$( "#sample" ).mouseover(function() {
  // ここに「何をするか」を書く
});

↑ 要素(#sample)の上にカーソルが乗った時にイベントが発生。

【何をするか】

ここまではイベントが発生するタイミングを定義しましたが、次は実際に何が起こるかを定義する式を紹介します。
上の「// ここに「何をするか」を書く」の箇所に追加してみてください。

1.動かす

その名の通り「animate」です！
jqueryのアニメーションでは必ずと言っていいほど使用されるメソッドで、要素を移動させたり、大きくしたりと、いろんな動きがこれ一つで実現できます。

2.出現させる

要素をフェードインしながら出現させたい時はfadeInを使用してみましょう。
ただ出現させるだけならshowがありますが、今回はよりアニメーションらしさがあるこちらを紹介します。

$("#sample2").fadeIn("fast");

↑ 要素を早く(fast)フェードインさせる。 ※出現させる場合は前もってcssでdisplay: hidden;にしておいてください。

以上、簡単にjqueryアニメーションによく使用される処理を紹介しましたが、これはあくまで一部です。
プラグインを使用したり、もっと複雑に設定していくと、さらに豊かな表現が行えます。
これ以上は僕もまだ勉強中…頑張ってもっと身につけていきたいと思います！