jQueryのアニメーションの使い方【サンプルコードで解説】

2019年9月5日

jQueryで要素にアニメーションをあてるanimate()の仕様と使い方、注意点をご紹介します。

jQueryのアニメーションとは？

jQueryのアニメーションとは、要素を指定した秒間で徐々に変化させることが出来るエフェクトを実現できます。

例えば、横幅が50pxの要素を200pxに変更させたい場合は、css()メソッドで$(要素).css('width', '200px')と値を設定することで変更が出来ます。

参考 css()の使い方

ただ、もしこれを時間をかけて徐々に変更をかけたい、といった場合には、animate()でcssを指定することで実現できます。

<div class="sample" style="background-color: blue; width: 50px; height: 50px;"></div>
<input type="button" class="animation_exe" value="アニメーションを実行する">

<script>
$(function(){
    //ボタンクリックされたら
    $('.animation_exe').click(function(){
        //1秒かけて青いバーの横幅を300pxに変更
        $('.sample').animate({width: '300px'}, 1000);
    });
});
</script>

動きがあることでユーザーに変化が分かりやすく伝わるのがメリットです。

覚えなくても良い？css3だけでも出来るアニメーション事情

ただ、2024年でjQueryのanimate()が積極的に使われていると聞かれると言葉を濁します。

というのも、現在はほとんどのブラウザがcss3に対応しており、cssのtranstionだけでも要素にアニメーションを付けることが出来るからです。

参考 CSSアニメーションの使い方をサンプルで解説

<style>
.css_sample{
    transition: 1s;
}
</style>
<div class="css_sample" style="background-color: blue; width: 50px; height: 50px;"></div>
<input type="button" class="animation_exe" value="アニメーションを実行する">

<script>
$(function(){
    $('.animation_exe').click(function(){
        $('.css_sample').css('width', '300px');
    });
});
</script>

こちらのサンプルは先ほどの例とは違いcssの値を変えるcss()メソッドを使用し、animate()を使用していませんが、アニメーションで動いていることが分かると思います。

「.css_sample」は「transition: 1s;」と設定されているので、「1秒かけて変化をする要素」として働き、結果widthの値を変えるだけで動きのある変化となるのです。

ただし、cssだけでは出来ない動きの付け方もあるので、覚えておいて損はないです。

アニメーションに対応しているcssプロパティの見極め方

jQueryのanimate()は、cssプロパティの値が数値で表現できるものしかアニメーションされません。

値が数値になるものは横幅や縦幅、文字サイズ、ボーダーサイズなどのことです。

例えば、文字の色や背景色を決めるcolor、background-colorは値がカラーコードで表現されるのでアニメーションされません。（別のライブラリを使用することで無理やり対応することは出来ます）

文字列を揃え位置を決めるtext-alignも、値がleftやcenterなど数値で決めるタイプではないので非対応です。

cssのtranstionは色の変化にも対応しているので、そちらと使い分けを行いましょう。どっちの紹介をしているんだっけ…

<style>
.css_sample{
    transition: 1s;
}
</style>
<div class="css_sample" style="background-color: blue; width: 50px; height: 50px;"></div>
<input type="button" class="animation_exe" value="アニメーションを実行する">

<script>
$(function(){
    $('.animation_exe').click(function(){
        $('.css_sample').css('background-color', 'red');
    });
});
</script>

animate()の書き方

次に、animate()メソッドの書き方について解説します。

$(要素).animate(cssプロパティ, duration, easing, callback)

animateは、

$(要素).animate(cssプロパティ, duration, easing, callback);

と書くことで実行できます。

第二引数以降は省略可能で、$(要素).animate(cssプロパティ);だけでも動作します。

第1引数のcssプロパティ

第一引数に指定するcssプロパティは、変化させる内容を記述します。

{}で括り、複数変化させたい内容がある場合はカンマで区切ってください。

以下の例では、widthを300pxに、font-sizeを30pxに変化するアニメーションを指定しています。

<div class="sample" style="border: 3px solid blue; width: 100px;">あああ</div>
<input type="button" class="animation_exe" value="アニメーションを実行する">

<script>
$(function(){
    $('.animation_exe').click(function(){
        $('.sample').animate(
            {
                width: '300px',
                fontSize: '30px'
            }
        );
    });
});
</script>

cssプロパティのキャメルケース指定に注意

animate()のcssプロパティを指定する時は、ハイフンが付くプロパティ、例えば「font-size」などは「fontSize」とハイフンを消してハイフン直後の1文字を大文字に変換して表記しなくてはいけません。

この書き方をキャメルケースと呼ぶのですが、よく間違えるポイントなので注意です。

まどろっこしい方は、cssプロパティをクオーテーション"で囲めば、cssと同じ書き方でanimateを実行できるので覚えておきましょう。

//実行される
$('.sample').animate({fontSize: '30px'});
    
//実行されない
$('.sample').animate({font-size: '30px'});
    
//実行される
$('.sample').animate({'font-size': '30px'});

第2引数のduration

durationは、アニメーションの変化にかかる時間を設定できます。

1000=1秒で計算し、次のサンプルは5秒かけてwidthを300pxに変化させているサンプルコードです。

<div class="sample" style="background-color: blue; width: 50px; height: 50px;"></div>
<input type="button" class="animation_exe" value="アニメーションを実行する">

<script>
$(function(){
    //ボタンクリックされたら
    $('.animation_exe').click(function(){
        //5秒かけて青いバーの横幅を300pxに変更
        $('.sample').animate({width: '300px'}, 5000);
    });
});
</script>

第3引数のeasing

easingは、アニメーションの変化の挙動を設定できます。

「swing（デフォルト）」と「linear」の2種類から選べ、プラグインなどを導入することでさらに挙動を増やすことができます。

<div class="sample1" style="background-color: blue; width: 50px; height: 50px;"></div>
<div class="sample2" style="background-color: blue; width: 50px; height: 50px;"></div>
<input type="button" class="animation_exe1" value="linearを実行">
<input type="button" class="animation_exe2" value="swingを実行">

<script>
$(function(){
    $('.animation_exe1').click(function(){
        //linear
        $('.sample1').animate({width: '300px'}, 2000, 'linear');
    });
    $('.animation_exe2').click(function(){
        //swing
        $('.sample2').animate({width: '300px'}, 2000, 'swing');
    });
});
</script>

第4引数のcallback

callbackは関数を指定する引数で、アニメーション終了後に実行されます。

$('.sample').animate({width: '300px'}, 2000, 'linear', hogehoge);
function hogehoge(){
    //アニメーション終了後実行
}

もちろん、無名関数としてメソッドにそのまま書くこともできます。

<div class="sample" style="background-color: blue; width: 50px; height: 50px;"></div>
<input type="button" class="animation_exe" value="アニメーションを実行する">

<script>
$(function(){
    $('.animation_exe').click(function(){
        $('.sample').animate({width: '300px'}, 2000, 'linear', function(){
            //アニメーション終了後にアラートを出す
            alert('animated!');
        });
    });
});
</script>

また、第2引数、第3引数を省略して書くこともできるので覚えておきましょう。

$('.sample').animate({width: '300px'}, function(){
    alert('animated!');
});

animate()活用例

最後に、jQueryのanimate()がよく使われている事例をご紹介します。

ページ最上部に戻る

ボタンを押したらページ最上部に戻る、という機能は大体どこのサイトでも実装されていると思います。

これをjQueryのanimateを使用することで、動きを付けた上で最上部に戻ることが出来ます。
これはcssだけでは出来ないアニメーション表現の1つですね。

スクロールアニメーションは「scrollTop」という特殊なプロパティを使用します。

<input type="button" class="scroll_exe" value="上に戻る">

<script>
$(function(){
    $('.scroll_exe').click(function(){
        //html要素のスクロール位置が0=最上部なので、0を指定
        //スマホ対応のためbodyも指定
        $('html,body').animate({scrollTop: 0});
    });
});
</script>

---

animate()がなくても現在はcssだけで出来ることが多いですが、jQueryの力を借りないと表現できないこともあるので、上手く付き合っていきましょう。

以上、jQueryのアニメーションの使い方、でした。