【初心者向け】jQueryのanimate()の使い方と使用例を解説！

サムネイル JavaScript
スポンサーリンク

今回はjQueryのanimate()メソッドの使い方と使用例を初心者向けに解説します！

実際のデモを見ながら使い方を確認していきましょう。

 

スポンサーリンク

animate()の書き方

animate()はその名の通りHTML要素にアニメーションをかけるメソッドです。

基本的な書き方は以下の通り。最低限これだけあればアニメーションはできます。

$('HTML要素').animate({
    'CSSセレクタ': 'CSSプロパティ'
});

 

実際に書いてみるとこんな感じになります。

$('.sample').animate({
  'font-size': '30px'
});

 

実はanimate()の中のCSSセレクタはもう一つ書き方があります。

CSSセレクタの部分は「’  ‘」と「-」を取り除いて、-（ハイフン）以降を大文字にするという書き方です。Javascriptもこの書き方ですね。

$('.sample').animate({
    fontSize: '30px'
});

 

こっちの方が書くのがラクなのでこの書き方がオススメです（キャメルケースという書き方ですが覚えなくていいです）

animate()はこんな感じで書こう！

$(‘.sample’).animate({
fontSize: ’30px’
});

 

注意点

CSSでは「font-size: 30px;」のように最後にセミコロンをつけますが、animate()ではセミコロンではなくカンマ「,」で区切ります。

また、最後のプロパティにはカンマもつけません。

$('.sample').animate({
    width: '100%',
    height: '50px',
    fontSize: '30px'
});

 

  • CSSプロパティを複数指定する時はセミコロンではなく、カンマで区切る。
  • 最後はカンマもつけない

ということを意識しておきましょう。

 

animate()はon()とよく一緒に使われる

ある要素をアニメーションさせたいなら、どのタイミングでアニメーションするかを決めることがほとんどです。なのでanimate()はon()とよく一緒に使われます。

$('.box1').on('click', function(){
    $(this).animate({
        width: '100%'
    });
});

 

※クリックでアニメーション

アニメーションにかかる時間を決める

animate()では何秒かけてアニメーションするかを指定することができます。

書き方は以下の通り。

$('.box1').on('click', function(){
    $(this).animate({
        width: '100%'
    }, 3000);
});

 

{}のうしろをカンマで区切り、その後ろにアニメーション時間をミリ秒単位で指定します。

今回であれば3000ミリ秒=3秒かけてアニメーションします。

 

※クリックでアニメーション

イージングを指定する

animate()ではアニメーションの緩急を変化させるイージングを指定することができます。

書き方は以下の通り。

$('.box1').on('click', function(){
    $(this).animate({
        width: '100%'
    }, 3000, 'linear');
});

 

カンマで区切り、「’  ‘」内にイージングの種類を指定することでアニメーションの緩急を指定できます。

 

また、デフォルトで使用できるイージングは’linear’と’swing’の2種類です。

他のイージングを使いたい場合はjQuery UI が必要となります。

jQuery UIとは、簡単にいうとjQueryのプラグインの集まりみたいなものです。jQueryの機能を拡張できるので広く使われています。

jQueryのイージングは種類がたくさんあるので、気になった方は以下のサイトが参考になると思います。

【jQuery】アニメーション動作に変化をつける『easing.js』の使い方
easingプラグインを利用した，jQueryによるアニメーションのエフェクトに変化を付ける方法を紹介します．単調な変化だけでなく，様々な動きを付けられるので，表現の幅が広がります．
www.hp-stylelink.com

 

アニメーション終了後の処理を指定

animate()ではアニメーションが終わった後の処理を指定することができます。

アニメーションが終わったら別のアニメーションを連続で指定することもできるわけですね。

書き方は以下の通り。

$('.box1').on('click', function(){
    $(this).animate({
        width: '100%'
    }, 3000, 'linear', function(){
            $(this).animate({
                width: '100px',
                height: '100px'
            });
        }
    );
});

 

やや複雑ですが、{}のうしろにfunction()を書くことでアニメーション終了後の処理を指定することができます。もちろんanimate()以外の処理も可能です。

 

※クリックでアニメーション

 

終了後のアニメーションにも時間とイージングを指定してみます。

$('.box1').on('click', function(){
    $(this).animate({
        width: '100%'
    }, 3000, 'linear', function(){
            $(this).animate({
                width: '100px',
                height: '100px'
            }, 1500, 'swing');
        }
    );
});

 

※クリックでアニメーション

CSS以外のプロパティも指定できる

animate()ではCSSプロパティ以外にも「scrollTop」など、CSSプロパティ以外のプロパティも操作できます（代表的なのはscroll系だと思います）

よくページの右下に置いてある「トップへ戻る」ボタンもanimte()で作れるわけですね。

 

 

$('.to-top').on('click', function(){
    $('body, html').animate({
        scrollTop: 0
    });
    return false;
});

 

時間やイージングは省略できる

例えば「時間は省略してイージングだけ指定する」といったことや、「時間もイージングも省略して終了処理だけ指定する」ということもできます。

 

・時間を省略してイージングだけ指定

※クリックでアニメーション

 

・時間もイージングも省略して終了処理だけ指定

※クリックでアニメーション

時間や関数を指定しなかった場合は以下のようにデフォルトの値が適用されます。

アニメーション時間の初期値=400(ミリ秒)

関数=’swing’

 

backgroundColorやcolorは変えられない

これはよく引っかかってしまうところなのですが、animate()でbackgroundColorやcolorをアニメーションさせることはできません。

というのも、animate()は数値型（100%とか16pxとか）のCSSプロパティにしか対応していないので、backgroundColor: blue;みたいに指定してもアニメーションできないのです。

以下の例ではbackgroundColor: blue;を指定しましたが、背景色はアニメーションできていません。

 

じゃあbackgroundColorやcolorはどのようにアニメーションさせればいいのかというと、先ほどちょこっと出てきたjQuery UI を使います。イージングの種類も増やせましたね。

詳しくは以下のページで解説しているので参考にしてください。

jQueryのanimate()でbackgroundColorが動作しない理由と対策
jQueryのanimate()を使ってbackgroundColorやcolorを変更しようとしてもできないという事態が起こると思います。...
dezanari.com

jQueryでbackgroundColorやcolorを指定したい場合は…

→jQuery UIを使う！

 

今回紹介したanimate()など、jQueryの基本は以下の本がとても参考になりました。

解説もわかりやすいので初心者にもおすすめです。

jQuery最高の教科書 [ シフトブレイン ]
created by Rinker

 

まとめ

animate()は使い道が多く、いろいろなことに応用できるので使えるようになっておくと便利です。

ぜひjQueryでアニメーションを使いこなせるようになりましょう！

スポンサーリンク