【実践】jQueryアニメーション完全ガイド - fadeIn/slideToggle/animate

jQueryアニメーションの基本

jQueryには、要素にアニメーション効果を簡単に適用できる機能が備わっています。

アニメーションの3つの指定方法

// 1. 速度を文字列で指定
$('#element').fadeIn('slow');    // ゆっくり（600ms）
$('#element').fadeIn('fast');    // 速く（200ms）

// 2. 速度をミリ秒で指定
$('#element').fadeIn(1000);      // 1秒

// 3. コールバック関数付き
$('#element').fadeIn(500, function() {
    console.log('アニメーション完了');
});

表示/非表示アニメーション

show() / hide() / toggle()

// 即座に表示/非表示
$('#element').show();
$('#element').hide();
$('#element').toggle();

// アニメーション付き
$('#element').show(500);         // 500msで表示
$('#element').hide('slow');      // ゆっくり非表示
$('#element').toggle(300);       // 300msで切り替え

// コールバック付き
$('#element').show(500, function() {
    console.log('表示完了');
});

動作: 幅、高さ、透明度を同時に変化させます。

使用例: メニュー表示

<button id="toggleMenu">メニュー</button>
<ul id="menu" style="display: none;">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

$('#toggleMenu').on('click', function() {
    $('#menu').toggle(300);
});

フェードアニメーション

fadeIn() / fadeOut() / fadeToggle()

透明度を変化させるアニメーションです。

// フェードイン（非表示→表示）
$('#element').fadeIn();
$('#element').fadeIn(500);
$('#element').fadeIn('slow');

// フェードアウト（表示→非表示）
$('#element').fadeOut();
$('#element').fadeOut(500);
$('#element').fadeOut('fast');

// フェードトグル
$('#element').fadeToggle(300);

fadeTo()

指定した透明度まで変化させます。

// 50%の透明度へ
$('#element').fadeTo(500, 0.5);

// 完全に不透明へ
$('#element').fadeTo(500, 1);

// 完全に透明へ（ただし表示状態は維持）
$('#element').fadeTo(500, 0);

fadeOut()とfadeTo(0)の違い:

fadeOut(): 透明度0になった後、display: none になる
fadeTo(0): 透明度0だが、display は変わらない（スペースを占有）

使用例: 通知メッセージ

function showNotification(message) {
    $('#notification')
        .text(message)
        .fadeIn(300)
        .delay(3000)   // 3秒待機
        .fadeOut(300);
}

// 使用
showNotification('保存しました');

スライドアニメーション

slideDown() / slideUp() / slideToggle()

高さを変化させてスライドするアニメーションです。

// スライドダウン（上から展開）
$('#element').slideDown();
$('#element').slideDown(500);

// スライドアップ（下に収縮）
$('#element').slideUp();
$('#element').slideUp('fast');

// スライドトグル
$('#element').slideToggle(300);

使用例: アコーディオン

<div class="accordion">
    <div class="accordion-item">
        <h3 class="accordion-header">セクション1</h3>
        <div class="accordion-content">
            <p>セクション1の内容...</p>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header">セクション2</h3>
        <div class="accordion-content">
            <p>セクション2の内容...</p>
        </div>
    </div>
</div>

// 最初は閉じた状態
$('.accordion-content').hide();

// ヘッダークリックで開閉
$('.accordion-header').on('click', function() {
    let $content = $(this).next('.accordion-content');

    // 他を閉じて、クリックしたものを開く
    $('.accordion-content').not($content).slideUp(300);
    $content.slideToggle(300);

    // アクティブクラスの切り替え
    $('.accordion-header').removeClass('active');
    if ($content.is(':visible')) {
        $(this).addClass('active');
    }
});

カスタムアニメーション

animate()

任意のCSSプロパティをアニメーションさせます。

// 基本構文
$('#element').animate({
    // アニメーションさせるプロパティ
    left: '200px',
    top: '100px',
    opacity: 0.5
}, 1000);  // 1秒

// オプション付き
$('#element').animate({
    width: '300px',
    height: '200px'
}, {
    duration: 1000,
    easing: 'swing',
    complete: function() {
        console.log('完了');
    }
});

アニメーション可能なプロパティ

// 数値で表現できるプロパティ
$('#element').animate({
    // 位置
    left: '100px',
    top: '50px',
    right: '+=20px',    // 現在値から相対的に
    bottom: '-=10px',

    // サイズ
    width: '200px',
    height: '150px',
    maxWidth: '300px',

    // マージン・パディング
    marginLeft: '20px',
    paddingTop: '10px',

    // 透明度
    opacity: 0.5,

    // フォント
    fontSize: '20px',
    lineHeight: '1.5',

    // ボーダー
    borderWidth: '5px',

    // スクロール
    scrollTop: 100,
    scrollLeft: 50
});

相対値でのアニメーション

// 現在の値から相対的に変化
$('#element').animate({
    left: '+=50px',      // 50px右へ
    top: '-=30px',       // 30px上へ
    width: '+=100px',    // 幅を100px広げる
    opacity: '-=0.2'     // 透明度を0.2下げる
}, 500);

toggle値

// 現在の状態によって切り替え
$('#element').animate({
    width: 'toggle',     // 表示/非表示を切り替え
    height: 'toggle',
    opacity: 'toggle'
}, 500);

複数のアニメーションを連続実行

// メソッドチェーンで連続実行
$('#element')
    .animate({ left: '200px' }, 500)
    .animate({ top: '100px' }, 500)
    .animate({ opacity: 0.5 }, 500);

イージング

イージングは、アニメーションの速度変化パターンを指定します。

デフォルトのイージング

jQueryには2種類のイージングが標準で用意されています。

// swing（デフォルト）- 始めと終わりがゆっくり
$('#element').animate({ left: '200px' }, 500, 'swing');

// linear - 一定速度
$('#element').animate({ left: '200px' }, 500, 'linear');

jQuery UIのイージング

jQuery UIを読み込むと、多くのイージングが使えます。

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

// jQuery UIのイージング
$('#element').animate({ left: '200px' }, 500, 'easeInQuad');
$('#element').animate({ left: '200px' }, 500, 'easeOutBounce');
$('#element').animate({ left: '200px' }, 500, 'easeInOutElastic');

主なイージング:

easeInQuad, easeOutQuad, easeInOutQuad
easeInCubic, easeOutCubic, easeInOutCubic
easeInElastic, easeOutElastic, easeInOutElastic
easeInBounce, easeOutBounce, easeInOutBounce
easeInBack, easeOutBack, easeInOutBack

アニメーションの制御

stop()

実行中のアニメーションを停止します。

// アニメーションを停止
$('#element').stop();

// 停止してキューをクリア
$('#element').stop(true);

// 停止して最終状態にジャンプ
$('#element').stop(true, true);

使用例: ホバーアニメーションのちらつき防止

$('#element').hover(
    function() {
        $(this).stop().animate({ opacity: 0.5 }, 300);
    },
    function() {
        $(this).stop().animate({ opacity: 1 }, 300);
    }
);

delay()

アニメーションを遅延させます。

// 1秒待ってからフェードイン
$('#element').delay(1000).fadeIn(500);

// 連続アニメーションに遅延を入れる
$('#element')
    .fadeOut(500)
    .delay(1000)
    .fadeIn(500);

finish()

すべてのアニメーションを即座に完了させます。

// すべてのアニメーションを完了状態にする
$('#element').finish();

アニメーションのキュー

// キューにアニメーションを追加
$('#element')
    .animate({ left: '100px' }, 500)
    .queue(function(next) {
        $(this).css('background', 'red');
        next();  // 次のキューを実行
    })
    .animate({ top: '100px' }, 500);

// キューをクリア
$('#element').clearQueue();

実践的なサンプル

スムーズスクロール

$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    let target = $(this.hash);
    if (target.length) {
        $('html, body').animate({
            scrollTop: target.offset().top - 50  // 50pxの余白
        }, 800, 'swing');
    }
});

カードのホバーエフェクト

.card {
    position: relative;
    overflow: hidden;
}

.card-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
}

$('.card').hover(
    function() {
        $(this).find('.card-overlay').stop().animate({
            bottom: 0
        }, 300);
    },
    function() {
        $(this).find('.card-overlay').stop().animate({
            bottom: '-100%'
        }, 300);
    }
);

モーダルウィンドウ

<div id="modal-overlay" style="display: none;">
    <div id="modal">
        <button class="close-btn">×</button>
        <h2>モーダルタイトル</h2>
        <p>モーダルの内容...</p>
    </div>
</div>

#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal {
    background: white;
    padding: 30px;
    border-radius: 10px;
    transform: scale(0.8);
    opacity: 0;
}

// モーダルを開く
$('#openModal').on('click', function() {
    $('#modal-overlay').fadeIn(300);
    $('#modal').animate({
        opacity: 1
    }, 300).css('transform', 'scale(1)');
});

// モーダルを閉じる
$('.close-btn, #modal-overlay').on('click', function(e) {
    if (e.target === this) {
        $('#modal').animate({
            opacity: 0
        }, 200);
        $('#modal-overlay').fadeOut(300, function() {
            $('#modal').css('transform', 'scale(0.8)');
        });
    }
});

プログレスバー

<div class="progress-bar">
    <div class="progress-fill" style="width: 0;"></div>
</div>
<span class="progress-text">0%</span>

function animateProgress(percentage) {
    $('.progress-fill').animate({
        width: percentage + '%'
    }, {
        duration: 1000,
        step: function(now) {
            $('.progress-text').text(Math.round(now) + '%');
        }
    });
}

// 使用
animateProgress(75);  // 75%までアニメーション

カウントアップアニメーション

function countUp(target, endValue, duration) {
    $({ count: 0 }).animate({ count: endValue }, {
        duration: duration,
        step: function() {
            $(target).text(Math.floor(this.count).toLocaleString());
        },
        complete: function() {
            $(target).text(endValue.toLocaleString());
        }
    });
}

// 使用
countUp('#counter', 10000, 2000);  // 2秒で10000までカウント

まとめ

アニメーションメソッド一覧

メソッド	説明
show() / hide()	表示/非表示
toggle()	表示切り替え
fadeIn() / fadeOut()	フェードイン/アウト
fadeToggle()	フェード切り替え
fadeTo()	指定透明度へ
slideDown() / slideUp()	スライド展開/収縮
slideToggle()	スライド切り替え
animate()	カスタムアニメーション

ベストプラクティス

stop()を使う: ホバーなど連続トリガーではstop()で前のアニメーションを停止
適切な速度: 200〜500msが自然に見える
イージング: 動きに合ったイージングを選択
パフォーマンス: transformやopacityはGPU支援が効くため軽い
アクセシビリティ: prefers-reduced-motionを考慮する

// アニメーション無効設定の確認
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    $.fx.off = true;  // jQueryアニメーションを無効化
}

jQueryアニメーションを使いこなして、魅力的なユーザーインターフェースを作りましょう。

目次