今回はjQueryのanimate()メソッドの使い方をサンプル付きで初心者向けに解説します！
動作などはイメージしづらい部分もあるかもしれないので、実際に動作を確認しながら見ていきましょう！
animate()の基本的な使い方
まずはanimate()メソッドの基本的な書き方を知っておきましょう。
animate()は以下のように書きます。
$('要素').animate(パラメーター, 時間, イージング, コールバック);
※「時間」「イージング」「コールバック」は省略可能です。省略した場合はjQueryがデフォルトで指定している値がそのまま入ります。
| 要素 | アニメーションをかけたい要素 |
|---|---|
| パラメーター | アニメーションさせるCSSプロパティ。 オブジェクトで指定 |
| 時間 | アニメーションにかかる時間 |
| イージング | アニメーションの種類 |
| コールバック | アニメーション終了後に行う処理。 関数を指定する |
これが基本になるのでまずは覚えておきましょう。
まだあまりわからなくても大丈夫です。このあと実際のサンプルを見ながら少しずつ理解していきましょう。
animate()にパラメーターを指定する
パラメーターの部分が実際にアニメーションする箇所です。最初はここさえわかればとりあえずokみたいな風潮あります（多分）。
パラメーターにはCSSプロパティを指定します。
以下はボタンをクリックするとwidthが10%から30%にアニメーションします。
※右下の「Return」をクリックするともう一度やり直せます
See the Pen
KKWdKNV by wagashi000327 (@wagashi000327)
on CodePen.
<button>クリック！</button>
<div class="box"></div>.box {
background-color: pink;
width: 10%;
height: 50px;
}$(function() {
$('button').click(function() {
$('.box').animate({
width: '30%'
});
});
});
別のサンプルも見てみます。
以下はボタンをクリックするとleftが0から100pxに、opacityが1から0にアニメーションします（HTMLは同じです）。
パラメーターは複数指定も可能です。
※右下の「Return」をクリックするともう一度やり直せます
See the Pen
MWpaWrp by wagashi000327 (@wagashi000327)
on CodePen.
.box {
background-color: pink;
width: 50px;
height: 50px;
position: absolute;
left: 0;
}$(function() {
$('button').click(function() {
$('.box').animate({
left: '100px',
opacity: 0,
});
});
});
こんな感じで、パラメーターの部分にCSSの値を指定することで、最終的にその値になるようアニメーションさせることができます。
「アニメーション終了時にどうなっていてほしいか？」を考えるとわかりやすいかもです。「終了時にこうなっていて欲しい！」という値を指定すればいいわけですね。
（上級者向け）値を追加するプロパティの書き方
ここはやや上級者向けで頻繁に使うものでもないので慣れていない人は知らなくても全然大丈夫です。
+=や-=といった演算子を使ってCSSを上書きではなく「値を追加」できます。
以下にwidthを30% + 50pxするサンプルと30% - 50pxするサンプルを用意しました。元の値はそのままの状態でanimate()で指定したプロパティがプラスされたりマイナスされているのが重要です。
See the Pen
YzZWpvy by wagashi000327 (@wagashi000327)
on CodePen.
<button>クリック！</button>
<div class="box1">30% + 50px</div>
<div class="box2">30% - 50px</div>.box1,
.box2 {
background-color: pink;
width: 30%;
height: 50px;
}
$(function() {
$('button').click(function() {
$('.box1').animate({
width: '+=50px'
});
$('.box2').animate({
width: '-=50px'
})
});
});
「現在の値を基準にしてそのままアニメーションしたい」という場合に使えますね。
animate()にパラメーターを指定する際の注意点
animate()を使う際、初心者が必ずと言っていいほどハマるポイントがいくつかあるので解説します。
数値以外のパラメーターはanimate()が効かない
初心者が間違いなくハマるポイントがここです。
animate()では以下のような「数値ではない値」のCSSプロパティは動作しません。
- transform(translate/rotate/skewなど)
- background-color
- color
上に挙げたようなCSSプロパティをanimate()に指定してアニメーションさせようしても動きません。
例えばwidthやheightは100pxや50%といったように数値で指定できるので動作しますが、background-colorやtransformは#fffやtranslate(10px, 10px)というように数値ではないのでanimate()が効きません。
初心者は必ずここでハマります。「background-colorをアニメーションさせようとしたけど動かない…」なんてことにならないように気をつけましょうね。
「じゃあbackground-colorとかをアニメーションさせたい時はどうすればいいの？」と思う人もいますよね。
やり方は別の記事で解説しているのでこちらを参考にしてください。一応絶対に無理というわけではないので。
＞＞jQueryのanimate()でbackgroundColorが動作しない理由と対策
パラメーターの指定の仕方に注意
パラメーターにはCSSの値を指定しますが、CSSの書き方ではなくJavaScriptのオブジェクトの書き方で指定します。
ここがちょっとややこしいので大体の初心者は引っかかりまくると思います（僕もエラー連発しました…）。
以下に動作する例と動作しない例をまとめました。
// ⭕動作する
$('.box').animate({
// ①シングルクオーテーションでもダブルクオーテーションでもok
'font-size': '20px'
"font-size": '20px'
'font-size': "20px"
// ②キャメルケースでもok
fontSize: '20px'
'fontSize': "20px"
// ③数値はクオーテーションで囲っても囲まなくてもok
// ④1単語ならクオーテーションなしでもok
'opacity': '0'
opacity: 0
});// ⭕動作する（複数指定する場合）
$('.box').animate({
// ⑤複数のパラメーターを指定する時は「,」で区切る（CSSみたいに「;」で区切るのはNG）
fontSize: '20px',
opacity: 0, // ←⑥最後の「,」はあってもなくてもok
});
// ❌動作しない
$('.box').animate({
// ハイフンがあるプロパティなのにクオーテーションで囲っていない
font-size: '20px'
// 「px」や「%」という文字列があるのにクオーテーションで囲っていない
'font-size': 20px
fontSize: 120%
});// ❌動作しない（複数指定する場合）
$('.box').animate({
// CSSみたいに「;」で区切るのはNG
fontSize: '20px';
opacity: 0;
});
①シングルクォーテーションでもダブルクオーテーションでもどちらでも構いません。
②ハイフンを取り除いて2単語目以降を大文字にする書き方を「キャメルケース」といいます。これはJavaScriptでよく使われる書き方です。キャメルケースの場合はクオーテーションはあってもなくてもいいのですが、個人的にはないほうがスッキリしていていいかなと思います。
③値が数値だけならクオーテーションは不要です。もちろんあっても大丈夫ですが、ないほうがスッキリします。なお、「px」や「%」などの文字列がある単位はクオーテーションが必要です。
④1単語だけならクオーテーションをそのままとっても大丈夫です（キャメルケースっぽく判定されます）。
⑤複数のパラメーターを指定する時はJavaScriptのオブジェクトと同じように「,」で区切ります。CSSは「;」で区切るのでついつい末尾に「;」をつけてしまいたくなりますが、エラーになるので気をつけてください。なお、最後の「,」はなくてもエラーになりません。
⑥一番最後のパラメーターは「,」は合ってもなくても動作します。
とまあこれだけ色々書き方があると大変だと思うので、個人的におすすめの書き方は、
- プロパティ：キャメルケース。
- 値：数値ならクオーテーションなし、「px」や「%」などの文字列が入るならシングルクオーテーション
という感じです。多分この書き方の人が多いと思います。
// おすすめの書き方
$('.box').animate({
// キャメルケース（クオーテーションなし）
fontSize: '20px',
// 「px」や「%」などの文字列があるならシングルクオーテーション
width: '50%',
// 数値ならクオーテーションなし
opacity: 0
});
パラメーターが1つでもオブジェクトで指定
animate()はパラメーターが1つでもオブジェクトで指定する必要があります。
jQueryのcss()はパラメーターが1の場合ならオブジェクトじゃなくても書けますが、animate()はパラメーターが1つでもオブジェクトで書く必要があるので気をつけましょう。
$('.box').animate({
width: '30%'
});
// ちなみにcss()はパラメーターが1つならこんな感じで書けます。animate()は無理
$('.box').css('width', '30%');
animate()の時間を指定する
時間の部分に「何ミリ秒かけてアニメーションするか？」を指定できます。「秒」ではなく「ミリ秒」で指定するので注意しましょう。
以下にボタンをクリックすると「指定なし」「1000ミリ秒」「2000ミリ秒」でアニメーションするサンプルを用意しました。秒数が指定されていない場合はデフォルトで400になります。
※右下の「Return」をクリックするともう一度やり直せます
See the Pen
VwpvpGv by wagashi000327 (@wagashi000327)
on CodePen.
$(function() {
$('button').click(function() {
$('.box1').animate({
width: '100%'
});
$('.box2').animate({
width: '100%'
}, 1000);
$('.box3').animate({
width: '100%'
}, 2000);
});
});こんな感じでアニメーションにかかる時間を指定できます。
時間を書く場所に少し気をつけましょう。
パラメーターは{}の中に書きますが、そのすぐ後ろに「,」で区切ってミリ秒で指定するといった書き方をします。最初は見慣れないかもしれませんが、使っていくうちに徐々に慣れていきます。
ちなみに変数で指定するなら変数名はdurationという名前がよく使われます。
また、数値ではなくslow、normal、fastというキーワードを使って時間を指定することもできます。
まあ正直あまり使わないので知らなくてもいいレベルだとは思いますが…。
$('.box1').animate({
width: '30%'
}, fast);
animate()のイージングを指定する
イージングとはアニメーションの緩急のことです。「最初はゆっくりだけど後半はすばやくアニメーションしたい」といった指定ができます。
jQueryでデフォルトで使えるイージングはlinearとswingの2種類だけで、デフォルトではswingが指定されています。
※右下の「Return」をクリックするともう一度やり直せます
See the Pen
JjWYWgo by wagashi000327 (@wagashi000327)
on CodePen.
$(function() {
$('button').click(function() {
$('.box1').animate({
width: '100%'
}, 3000, 'linear');
$('.box2').animate({
width: '100%'
}, 3000, 'swing');
});
});
イージングは時間の後ろを「,」で区切って指定します。シングルクオーテーションでもダブルクオーテーションでもどちらでも構いません。
動きを見るとlinearは一定、swingは緩急があるアニメーションなのがわかると思います。
ちなみに変数で指定するなら変数名はeasingという名前がよく使われます。
基本的にswingで事足りることが多いと思いますが、「jQuery easing」というプラグインを使うことで指定できるイージングの種類がかなり増えます。
jQuery easingで指定できるイージング一覧は以下のサイトにまとまっているので興味のある人は見てみてください。
＞＞jQuery Easing Plugin エフェクト一覧ページ
動きをグラフにしたサイトもあります。こっちのほうがわかりやすいかも。
animate()にコールバックを指定する
コールバックとはアニメーション終了後に行う処理のことです。「animate()が終わったらこんな処理をしたい」という部分をコールバックに書きます。
以下はアニメーション終了後に1秒かけてテキストを表示させるサンプルです。「テキストを表示させる」という部分がアニメーションが終わってから実行される点に注目してください。
※右下の「Return」をクリックするともう一度やり直せます
See the Pen
wvJKdxY by wagashi000327 (@wagashi000327)
on CodePen.
<button>クリック！</button>
<div class="box"></div>
<p class="text">アニメーション終了後に表示します</p>.box {
background-color: pink;
width: 10%;
height: 50px;
}
.text {
display: none;
}$(function() {
$('button').click(function() {
$('.box').animate({
width: '100%'
}, 3000, 'swing', function() {
$('.text').fadeIn(1000);
});
});
});
コードが急に複雑になった感じがしますが、書き方自体は難しくないので落ち着いて見ていきましょう。
function() {}の部分がコールバックですね。コールバックはイージングの後ろを「,」で区切り、関数で指定します。
後はそのfunction() {}の中にアニメーション終了後にやりたい処理を書くだけです。やってみるとそこまで難しくない。
animate()で連続アニメーション
animate()をメソッドチェーンで書くことで連続でアニメーションができます。
以下のサンプルではボタンをクリックするとanimate()を使って「右へ移動→下へ移動→透過」という順番で連続アニメーションをします。
※右下の「Return」をクリックするともう一度やり直せます
See the Pen
KKWMNay by wagashi000327 (@wagashi000327)
on CodePen.
.box {
background-color: pink;
width: 50px;
height: 50px;
position: absolute;
left: 0;
}
$(function() {
$('button').click(function() {
$('.box')
.animate({
left: '100px'
}, 1000)
.animate({
top: '100px'
}, 1000)
.animate({
opacity: 0
}, 1000);
});
});
ちゃんと順番通りに連続でアニメーションが実行されているのがわかりますね。
一応注意点としては途中で「;」で区切ってしまうとメソッドチェーンにならずにそこで処理が終わってしまうので気をつけましょう。「;」をつけるのは最後だけです。
「ちょっと見づらいな…」と感じる人はこんな書き方でもいいと思います。この辺は正直好みもありますね。
$(function() {
$('button').click(function() {
$('.box')
.animate({left: '100px'}, 1000)
.animate({top: '100px'}, 1000)
.animate({opacity: 0}, 1000);
});
});
★jQuery参考書籍
まとめ
animate()はjQueryの中でも基本的でよく使われるメソッドですが、初めて使う人からすると書き方に引っかかる部分が多くエラーが頻発しがちです。
animate()をこれから触る人は大体エラーで苦しみながら少しずつ習得していくので挫けずに少しずつ慣れていけばokです。
ある程度扱えるようになると応用が効いてくるのでぜひマスターしましょう！
