【jQuery】アニメーション完全ガイド｜animate()・fadeIn/Out・slideToggle・stop()まで

jQueryのアニメーション機能を使うと、フェードイン・スライド・カスタムアニメーションを手軽に実装できます。本記事ではshow/hide・fade系・slide系・animate()・アニメーションキュー管理・CSSトランジションとの使い分けまで体系的に解説します。

1. 基本: show()/hide()/toggle()

// 即座に表示/非表示
$('.box').show();    // 表示
$('.box').hide();    // 非表示
$('.box').toggle();  // 切り替え

// アニメーション付き表示/非表示
$('.box').show(400);         // 400ms でアニメーション表示
$('.box').hide('slow');      // 'slow'(600ms) で非表示
$('.box').toggle('fast');    // 'fast'(200ms) で切り替え

// コールバック: アニメーション完了後に実行
$('.box').hide(500, function () {
  console.log('非表示完了');
});

2. fade系: fadeIn/fadeOut/fadeTo/fadeToggle

// fadeIn: 透明→不透明（表示）
$('.popup').fadeIn(400);

// fadeOut: 不透明→透明（非表示）
$('.popup').fadeOut(400);

// fadeToggle: 表示と非表示をフェードで切り替え
$('.popup').fadeToggle(300);

// fadeTo: 任意の透明度まで変化
$('.box').fadeTo(500, 0.5);   // 50%透明度まで
$('.box').fadeTo(500, 1.0);   // 完全不透明（元に戻す）
$('.box').fadeTo(500, 0.0);   // 完全透明（非表示にはならない）

// コールバック付き
$('.notification').fadeIn(300).delay(2000).fadeOut(300);

3. slide系: slideDown/slideUp/slideToggle

// slideDown: 高さ0→元の高さ（表示）
$('.accordion-content').slideDown(300);

// slideUp: 元の高さ→0（非表示）
$('.accordion-content').slideUp(300);

// slideToggle: スライドで表示/非表示を切り替え
$('.faq-answer').slideToggle(200);

// アコーディオンメニューの定番実装
$(function () {
  $('.accordion-header').on('click', function () {
    $(this).next('.accordion-content').slideToggle(250);
    $(this).toggleClass('is-open');
  });
});

4. animate()でカスタムアニメーション

animate() はCSSプロパティを指定してアニメーションを作成します。数値で指定できるプロパティ（width, height, opacity, margin, paddingなど）に対応しています。

// 基本構文: animate(プロパティ, 時間, easing, コールバック)
$('.box').animate(
  { width: 300, height: 200, opacity: 0.7 },  // 変化させるプロパティ
  500,                                          // 時間(ms)
  'swing',                                      // easing
  function () { console.log('完了'); }          // コールバック
);

// 相対値で指定
$('.box').animate({ width: '+=50px' });  // 現在値+50px
$('.box').animate({ left: '-=20px' });   // 現在値-20px

// 複数のアニメーションを順番に実行（キュー）
$('.box')
  .animate({ left: 200 }, 400)
  .animate({ top: 100 }, 300)
  .animate({ opacity: 0 }, 200);

5. stop()でアニメーションを制御する

// stop(): アニメーションを途中で止める
// stop(clearQueue, jumpToEnd)
//   clearQueue: trueでキューを全消去（デフォルト: false）
//   jumpToEnd:  trueでアニメーション最終状態に即移動（デフォルト: false）

$('.box').stop();             // 現在のアニメーションを止める
$('.box').stop(true);         // 全キューをクリアして止める
$('.box').stop(true, true);   // 全キューをクリアして最終状態にジャンプ

// ホバーのちらつき防止パターン
$('.menu').hover(
  function () { $(this).find('.submenu').stop(true, true).slideDown(200); },
  function () { $(this).find('.submenu').stop(true, true).slideUp(200); }
);

6. delay()でアニメーションを遅延させる

// 1秒待ってからfadeOut
$('.alert').delay(1000).fadeOut(500);

// 複数の要素を時間差で表示
$('.card').each(function (i) {
  $(this).delay(i * 100).fadeIn(300);
});

7. CSSトランジションとanimate()の使い分け

まとめ

jQueryのアニメーションはshow/hide・fade・slide・animate()と豊富です。ホバー時のCSSスタイル変化はCSSトランジションに任せ、JavaScriptの条件制御が必要なアニメーションにjQueryを活用するのがベストプラクティスです。アニメーションのちらつき防止には stop(true, true) を忘れずに。

関連記事: jQueryのclassの追加と削除でアニメーションを制御する方法 / jQueryでローディング画面を実装する方法

よくある質問（FAQ）