【jQuery】animate()の超基本的な使い方【アニメーション】 |

投稿日 : 2019年4月4日

【jQuery】animate()の超基本的な使い方【アニメーション】

こんにちは、yutaです。

jQueryのanimate()を使うことでWEBページ上で要素にアニメーションを付けることができますが、javascript初心者の自分はかなーーーり混乱したので、超基本的なanimate()の使い方と、ちょっとしたアレンジのやり方、そしてコーディングする上での注意点を書き留めておきます。

【今回、実装するアニメーション】
画面左上に表示されている<span>要素をクリックした時に、その要素を画面右側に動かす。

1.とりあえず完成したコードを見てみる
 2.とりあえずアニメーションを見てみる
 3.HTMLの中身をみる
 4.ちょっとアレンジを加える
 5.コーディング上の注意点
 5-1.jQueryのjsファイルはslimじゃない物を使う
 5-2.動かしたい要素をtop,bottom,left,rightで指定している場合は注意して
 5-3.でも、position:fixedかabsoluteは指定しておいて

1.とりあえず完成したコードを見てみる

まず、実装済みのコードを見てみます。

HTML

CSS

animate()の使い方を理解することが目的なので、できるだけシンプルにしています。実際今回のテーマに直接的に関わっているコードは、HTMLの12行目、18〜25行目および、CSSの2行目だけです。

2.とりあえずアニメーションを見てみる

次は、↑コードでの動きを見てみましょう。

3.HTMLの中身を見る

CSSはいじる必要がないのでここからはHTMLの話です。

まず、12行目ですが<span>タグで「明太子」という文字が書いてある要素を作って、idを「mentaiko」に設定しているだけですね。

次に、18〜25行目ですがコードをもう一度抜粋しておきます。

<script>
var menta = $('#mentaiko');

menta.click(function(){
    menta.animate({right: "200px"});
    }
);
</script>

まず、19行目で<span>要素、つまりは明太子ですね。これを変数mentaに格納します。$()で囲むとオブジェクトとして捉えてくれるんだろうなと思っています。違ったら教えてください。笑

21行目では、click()イベントを使用してクリック時に実行される処理を()内に記述しています。ここで、menta.click()とすることで明太子がクリックされた時に()内の処理が実行されることになります。

ですが、実際にはclick()の()内にfunction(){}を入れて、その{}内にクリック時の処理を記述するようにしなければなりません。なぜ、そうしないといけないのか僕もまだきちんと理解できていないのでご存知の方がいらっしゃれば教えて欲しいです。

次に、22行目でアニメーションの命令を記述しています。animate()の引数に関してですが、最低限必要なのはCSSプロパティのオブジェクト1つだけです。

・・・？？わかりにくいので実際のコードで言うと、{right: “200px”}のことです。CSSでもこう言う記述しますよね、要するにCSSの記述のことだと思ってもらえればOKです。ただし、CSSファイルに記述するときと違い、”200px”のように””でくくっているという微妙な違いはあります。

今回は、22行目でanimate({right: “200px”})としているので、あるオブジェクトを画面右端から200pxの位置に移動するするということですね。

また、menta.animate({right: “200px”});としているので、あるオブジェクトは明太子を指していることになります。

ということで、上記のコードは「明太子をクリックした時に、明太子を画面の右端から200pxの位置に移動する」アニメーションになります。

ちなみに・・・right:”200px”は、right: 200としても同じです。この場合は、pxと””の記述をしません。pxを記載した時には必ず””で囲まないとエラーになります。

4.ちょっとアレンジを加える

jQueryの公式サイトによると、アニメーションの継続時間はデフォルトで400msecになっています。今回は時間指定をしていなかったので、明太子が0.4秒という速さで画面上を横移動したはずです。笑

これを好きな時間に変えたければ、animate()の引数をもうひとつ増やしてmsec単位で指定してください。例えば↓のように記述すると、3秒かけて明太子が動くようになります。

menta.animate({right: “200px”}, 3000);

また、明太子を斜め下に動かしたい場合は、CSSプロパティの指定を増やせばOKです。今回、明太子の位置は指定していないのでデフォルトで画面左上に表示されますが、これを画面右下に表示したい場合は以下のようにします。

menta.animate({right: “200px”, bottom: “50px”});

5.コーディング上の注意点

僕が勉強している間につまづいたことがいくつかあったので、コーディングする上での注意点を書き留めておきます。

5-1.jQueryのjsファイルはslimじゃない物を使う

jQueryは色々な種類があり、
jquery-3.3.1.js
jquery-3.3.1.min.js
jquery-3.3.1.slim.js
jquery-3.3.1.slim.min.js
などがあります。
これらの違いはこちらの記事が必要にわかりやすいかったんですが、要するにslimという記載があるバーションはアニメーション関係の機能をごっそり取り除いているので、これをHTMLで読み込んでもanimate()が動きません。

ですので、slim以外を使用してください。僕はgoogleがホスト(提供)しているjQueryを使用するのが良いと思います。僕が記事を書いている2019年4月4日現在は↓です。コピペして使えます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

5-2.動かしたい要素をtop,bottom,left,rightで指定している場合は注意して

今回、明太子の位置はCSSで指定していませんでしたので彼は元気に動き回っていました。

しかし、もしCSSで明太子を↓のように位置指定した場合・・・

#mentaiko{
position: absolute;
left: 100px;
}

animate()でright:”200px”などと指定しても、思った動きをしてくれません。試してみればわかりますが、明太子が伸びるだけです。

考えてみれば簡単なことで、明太子の左端の位置はleft:100pxで固定されているのでright:”200px”で右端の位置を指定しても、明太子がいくらか伸びるだけです。

まぁ、別にどうでもいいんですが、この場合画面の右端から200pxの位置まで明太子が伸びるのかなと思ったらそうでもないようです。伸びることには伸びるんですが、このやり方でやってもうまくいきませんので止めておきましょう。笑

よって、あらかじめCSSで「left: 100px」などと位置を指定してある要素をアニメーションで動かす場合は、animate()側でもleftを使って動かす必要があります。例えば、menta.animate({left: “500px”});とすれば、CSS側で設定していたleft:100pxの値が500pxに変わるだけですので、要素がきちんと動いてくれます。これをrightで指定するとすでに述べたように明太子が伸びます。