webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは?
jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。
animateメソッドは値で指定出来る物(margin、color、widthなど)に対し有効です。

$('#box').animate({
    'left': '500px',
    'top': '300px'
});
メソッドチェーンを使い、順番に処理を行う
$('#box').animate({'left': '500px'}).animate({'top': '300px'});
速度を調節する

「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000);
});
イージングの設定

イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。
標準では「linear」と「swing」の2種類しかありません。「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},{
    'duration': 600,
    'easing': 'linear'
});
アニメーションの終了後に何かする
$('#box').animate({
    'left': '500px'
},{
    'duration': 600,
    'complete': function(){
        alert('終わりました');
    }
});