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('終わりました'); } });