「ボタンを押したとき、要素を滑らかに移動させたい」「サイズや透明度を少しずつ変えたい」と思うことがありますよね。jQueryのanimate()を使うと、数値で指定できるCSSプロパティを一定時間かけて変化させられます。
この記事では、animate()の基本構文から、実際に動くカードと進捗バーの作り方、連打で動きがたまる問題、動かない原因までを初心者向けに解説します。
jQueryのanimate()とは
animate()は、指定したCSSプロパティを現在値から目標値まで徐々に変化させるjQueryメソッドです。位置、幅、高さ、余白、透明度など、数値として計算できるプロパティに使えます。
基本の考え方は「どのCSSプロパティを、何ミリ秒かけて、どの動き方で変え、完了後に何をするか」です。すべての引数を使う必要はありませんが、役割を順番に理解するとコードを読みやすくなります。
animate()の基本構文
最初の引数へCSSプロパティ、2番目へ時間、3番目へイージング、4番目へ完了後に実行する関数を指定します。
$('.box').animate(
{
left: 300,
opacity: 0.6,
},
1000,
'swing',
function () {
console.log('完了しました');
},
);| 引数 | 役割 | 例 |
|---|---|---|
| properties | 変化させるCSSプロパティと目標値 | { left: 300 } |
| duration | 完了までの時間（ミリ秒） | 1000 |
| easing | 変化の速度 | 'swing' |
| complete | 完了後に実行する関数 | function () {} |
durationの初期値は400ミリ秒です。jQuery本体で使える主なイージングは、一定速度のlinearと、始めと終わりが緩やかなswingです。
animate()で変化できるCSS
基本のanimate()では、width、height、left、top、margin、padding、fontSize、opacityなどを変化させられます。
JavaScriptのオブジェクトとして書くため、ハイフンを含むCSS名はfontSizeのようなキャメルケースにするか、'font-size'のようにクォーテーションで囲みます。
$('.box').animate({
width: 240,
height: 120,
marginLeft: 40,
fontSize: 24,
opacity: 0.7,
});backgroundColorのような色は、jQuery本体だけでは数値として補間できません。色を滑らかに変えたい場合はCSSのtransitionを使うか、対応するプラグインを検討します。
カードを移動しながら進捗バーを伸ばす
ここからは、ボタンを押すとカードが右へ移動し、同時に進捗バーが伸びる例を作ります。用意するファイルはindex.html、style.css、script.jsの3つです。
開始前はカードが左端にあり、進捗バーの幅は0です。「アニメーション開始」を押したときだけanimate()を実行します。
HTMLでボタンと動かす要素を作る
index.htmlへ、操作ボタン、移動するカード、進捗バー、状態メッセージを記述します。jQuery本体は自分のscript.jsより先に読み込んでください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery animateの表示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="demo">
<h1>進捗をアニメーションで伝える</h1>
<p>ボタンを押すと、カードが移動しながら進捗バーが伸びます。</p>
<div class="demo__actions">
<button id="start-button" type="button">アニメーション開始</button>
<button id="reset-button" type="button">元に戻す</button>
</div>
<div class="stage">
<div id="moving-card" class="moving-card">準備中</div>
</div>
<div class="progress" aria-label="進捗">
<div id="progress-bar" class="progress__bar"></div>
</div>
<p id="status" aria-live="polite">開始ボタンを押してください。</p>
</main>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSSで移動範囲を作る
leftを動かすには、対象要素のpositionをstatic以外にする必要があります。今回は親要素をposition: relative、カードをposition: absoluteにします。
.stage {
position: relative;
height: 112px;
border-radius: 14px;
background: #f4f7fc;
overflow: hidden;
}
.moving-card {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
padding: 20px;
border-radius: 12px;
color: #fff;
background: #2368d8;
text-align: center;
font-weight: 700;
}
.progress {
height: 14px;
margin-top: 22px;
border-radius: 999px;
background: #e4eaf3;
overflow: hidden;
}
.progress__bar {
width: 0;
height: 100%;
border-radius: inherit;
background: #24a46d;
}animate()で位置・透明度・幅を変える
script.jsでは、親要素の幅からカードの幅と右余白を引き、移動先のleftを計算します。固定値だけにしないことで、表示領域の幅が変わっても右端へ収まりやすくなります。
const $movingCard = $('#moving-card');
const $progressBar = $('#progress-bar');
const $status = $('#status');
$('#start-button').on('click', function () {
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const duration = reducedMotion ? 0 : 1000;
const maxLeft = $('.stage').innerWidth() - $movingCard.outerWidth() - 20;
$status.text('アニメーション中です…');
$movingCard
.stop(true, true)
.text('移動中')
.animate(
{
left: maxLeft,
opacity: 0.65,
},
duration,
'swing',
function () {
$(this).text('完了').animate({ opacity: 1 }, 200);
$status.text('アニメーションが完了しました。');
},
);
$progressBar.stop(true, true).animate({ width: '100%' }, duration);
});
$('#reset-button').on('click', function () {
$movingCard.stop(true, true).css({ left: 20, opacity: 1 }).text('準備中');
$progressBar.stop(true, true).css('width', 0);
$status.text('開始ボタンを押してください。');
});width: '100%'のように、値へ単位を含めることもできます。完了関数内のthisはアニメーション対象のDOM要素を指すため、$(this)でjQueryオブジェクトに変換しています。
animate()を実行した表示
カードが右端へ移動し、進捗バーの幅が100%になりました。カードとバーは別の要素ですが、それぞれへ同じdurationを指定しているため、ほぼ同時に完了します。
完了後はカードの文字と状態メッセージを変更しています。動きだけに頼らず文章でも完了を伝えると、利用者が現在の状態を判断しやすくなります。
相対値で現在位置から動かす
+=や-=を付けると、現在値を基準に増減できます。次のコードは、クリックするたびに現在位置から右へ50px移動します。
$('#move-button').on('click', function () {
$('.box').animate({ left: '+=50px' }, 400);
});相対値は便利ですが、クリック回数に応じて画面外へ移動する可能性があります。移動範囲に上限を設けるか、リセット処理と組み合わせてください。
連打でアニメーションがたまる場合はstop()を使う
jQueryのアニメーションは通常キューへ順番に追加されます。ボタンやホバーを何度も実行すると、操作をやめたあとも動き続けることがあります。
$('.box')
.stop(true, true)
.animate({ left: 300 }, 600);1つ目のtrueは待機中のキューを削除し、2つ目のtrueは現在のアニメーションを終了位置まで進めます。ホバーや連打されるボタンでは、意図しない動きが残らないか確認してください。
動きを減らす設定へ配慮する
大きな移動や点滅を負担に感じる人もいます。OSやブラウザで「視差効果を減らす」「動きを減らす」が有効な場合は、prefers-reduced-motionを確認して時間を0にする方法があります。
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const duration = reducedMotion ? 0 : 600;
$('.box').animate({ left: 300 }, duration);アニメーションをなくしても、完了状態や操作結果が分かる表示を残してください。この記事の例では、移動時間が0でも「完了」という文字とメッセージが表示されます。
animate()が動かないときの確認項目
- メソッド名のスペル：
animeteではなくanimateです。 - jQueryの読み込み順：jQuery本体を
script.jsより先に読み込みます。 - セレクタ：対象要素が取得できているか開発者ツールで確認します。
- 数値プロパティ：色など、jQuery本体で補間できない値を指定していないか確認します。
- position：
leftやtopを動かす要素はposition: relativeやabsoluteにします。 - display: none：非表示要素は、サイズを変えても画面には現れません。表示してから動かします。
- 単位と値：
'100%'など、必要な単位を含めます。 - キュー：連続操作で動きがたまる場合は
stop()を追加します。
CSSアニメーションとの使い分け
単純なホバー表現やクラスの付け外しで完結する動きは、CSSのtransitionやanimationが向いています。JavaScriptで現在値を計算したい、処理の完了後に別の動作を行いたい、既存のjQueryサイトへ追加したい場合はanimate()が使いやすいです。
どちらを選ぶ場合も、動きを装飾だけの目的で増やしすぎず、操作結果や重要な変化を伝えるために使いましょう。
まとめ
animate()は、数値で指定できるCSSプロパティを滑らかに変化させます。- 時間はミリ秒で指定し、初期値は400ミリ秒です。
linearとswingで動き方を選べます。- 連打で動きがたまる場合は
stop(true, true)を確認します。 - 移動には
positionが必要で、色はjQuery本体だけでは基本的に補間できません。 - 動きを減らす設定と、動き以外の状態表示にも配慮します。
まずは記事内の3ファイルを同じフォルダへ保存し、カードの移動、進捗バー、リセット、連打時の動作を順番に試してみてください。