jQuery animate()をマスターしよう!カスタムCSSアニメーションの基本ガイド

jQueryのanimate()メソッドは、指定したCSSプロパティに対してカスタムアニメーションを実行します。このメソッドは複数の引数を受け取ることができ、第1引数には変更したいCSSプロパティを含むオブジェクトを指定します。第2引数では、duration(継続時間)やコールバック関数など、さまざまなオプションを設定可能です。

animate()には非常に多くのオプションが用意されていますが、本記事では入門編として、jQuery animateの基本構文とサンプルコードを紹介します。サンプルでは、animate()を使って<div>要素を拡大する方法を見ていきましょう。

jQuery animate()を使う理由

jQuery animate()には多くの活用シーンがあります。シンプルに言えば、フロントエンドでアニメーションが必要になったときに、いつでも使えるメソッドです。動的で複雑なアニメーション表現も、このメソッドひとつで実現できます。

近年、アニメーションはフロントエンド開発における標準的な手法となっています。animate()の使い方に慣れれば、プロジェクトのフロントエンドへアニメーションを組み込むのも難しくありません。まずは基本構文から学んでいきましょう。

jQuery animate()の構文

前述のとおり、animate()はCSSオブジェクトを引数として受け取ります。これは、選択したCSSプロパティの新しい値を含むオブジェクトです。ベストプラクティスとしては、スタイルシートで定義されている要素に対してのみanimate()を使用することが推奨されます。

すべてのjQueryメソッドと同様に、animate()も選択した要素に対して適用する必要があります。要素を選択したら、animate()を呼び出し、最終的な見た目となる値を持つCSSプロパティのオブジェクトを渡します。ここで重要な点として、animate()はCSSの数値プロパティにしか対応していないことに注意してください。色やフォントの種類などの属性は読み取られません。

jQuery animate()の実践例

それでは、これまでの説明をコードに落とし込んで理解を深めましょう。まずは、ボタンと<div>要素を配置した基本的なHTMLから始めます。

HTML
<button id="click">クリックしてね</button>
<div id="block">変化を見てみよう!</div>

どちらの要素にもid属性が付いています。jQueryでこれらの要素を選択する際に、このid属性を使用します。次に、animate()を使うために<div>をどのようにスタイリングするか見てみましょう。

CSS
 div {
 background-color: lightblue;
 width: 100px;
 border: 1px solid blue;
 }

ここでは、<div>に背景色・幅・細いボーダーを設定しています。jQueryで<div>を選択し、animate()にCSS属性のオブジェクトを渡せば、アニメーション完了後の最終的な状態を指定できます。

$('#click').click(function() {
 $('#block').animate({
 width: '70%',
 fontSize: '3em',
 borderWidth: '10px'
 })
})

このjQueryコードを分解してみましょう。まず、id属性「click」でボタンを選択しています。次に、jQueryのclick()メソッドを呼び出して、クリックイベントを待ち受けるイベントハンドラを登録します。クリックイベントを検知すると、コールバック関数が実行される仕組みです。

おさらいとして、コールバック関数とは、別の関数に渡され、後から実行される関数のことです。このケースでは、クリックイベントが検知された後に実行されます。jQuery click()について詳しく知りたい方は、関連記事もあわせて参考にしてください。

続いてコールバック関数の中身を見ていきます。ここでは<div>を選択しています。ボタンと同様に、id属性「block」を使って要素を取得します。そして、その<div>に対してanimate()を呼び出し、CSSオブジェクトを渡しているのです。

注目すべきは、fontSizeやborderWidthがCSSでの記述方法(ハイフン区切り)と異なる点です。jQueryでは、通常ハイフンでつなぐCSSプロパティをキャメルケースで記述します。

CSSオブジェクト内の値は、アニメーション完了時に表示したい最終的な状態です。ボタンをクリックすると、<div>がアニメーションしながら拡大していきます:

成功しました!<div>の中身が、新しいCSSの値に到達するまで一緒に拡大していくのが確認できます。

まとめ

本記事では、jQuery animate()の入門編として、animate()がCSSオブジェクトに対してアニメーションを実行することを学びました。このCSSオブジェクトには、アニメーション完了時の最終的な表示値を渡します。繰り返しになりますが、animate()が読み取れるのは数値のCSS値のみです。背景色やフォントの種類といったプロパティは対象外となるため、注意しましょう。

jQuery animate()にはまだまだ学ぶべきことがたくさんあります。この入門内容が理解できたら、さらに踏み込んだチュートリアルにも挑戦してみてください。公式ドキュメントを読み、付属のサンプルで練習することも効果的な学習方法です。animate()は最初は複雑に感じるかもしれませんが、継続的に練習すれば、思ったより早くアニメーションをマスターできるでしょう!