動かす前の準備
jQueryの前に動かす要素をhtml&cssで作成しておきましょう。
html
<div id="box"></div>
css
#box {
width: 100px;
height: 100px;
background: #3399FF;
}
jQueryコードを書くときの基本的な形は次のようになります。
javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//ここにjQueryのコードを書く
});
</script>
以降は「ここにjQueryのコードを書く」という部分にコードを書いていきます。
「animate」メソッドを使用した単純なアニメーション
最初はページが表示されたら右に「500px」スライドさせるだけのアニメーションです。
「animate」メソッドはこのように使います。
ここでは作成した要素（#box）を右（margin-left）へ500xpスライドさせたいのでしたね。
これを先ほどの図にあてはめるとこうなります。
javascript
$('#box').animate({
'marginLeft': '500px'
});
これで実行するとスライドしているはずです。簡単ですよね。
ちなみにcssでプロパティは「margin-left」と「-（ハイフン）」で句切られていますが、「animate」メソッドでは単語間の最初の文字を大文字にするキャメルケースという書式で記述します。
なので「margin-left」は「marginLeft」と書きます。
ここでは「marginLeft」を使用しましたが「fontSize」でも「width」でも数値で指定するようなパラメータならほとんどのものはアニメーションできます。
親要素を基点とする
posirionの設定がないと要素を配置した位置を基点としてアニメーションされるので、複数の要素を操作したいときは不便なときがあります。 そこで、jQueryという話ではないですが、複数の要素を同じ基点で動かす方法をご紹介します。
boxを2つにしたら「div」で囲みます。
html
<div id="wrap"> <div id="box1"></div> <div id="box2"></div> </div>
親にを「position: relative」にして、子は「position: absolute」を指定しましょう。
css
#wrap {
position: relative;
}
#box2,
#box1 {
position: absolute;
width: 100px;
height: 100px;
background: #5EA9F4;
}
これで「#wrap」を基点として、「left」や「top」で移動できるようになります。
javascript
$('#box1').animate({
'left': '500px'
});
$('#box2').animate({
'left': '300px',
'top': '200px'
});
斜めに移動させる
横にスライドさせるだけなら「left」を動かすだけでしたが、斜め下に移動する場合はどうしたら良いでしょうか？
はい。「left」と「top」を同時に動かせば良いですよね。
やり方は簡単ですプロパティと数値を1セットとして「,」で繋げていくだけです。
javascript
$('#box1').animate({
'left': '500px',
'top': '300px'
});
3つでも4つでもアニメーションさせたいパラメータをどんどん追加できます。
連続で移動させる
2つ指定すれば斜めに移動できることはわかったのですが、たとえば右に移動してから下に移動するといった処理はどうしたらいいでしょうか。
これはjQueryのメソッドチェーンという書き方をすれば簡単です。
javascript
$('#box1')
.animate({'left':'500px'})
.animate({'top':'500px'})
.animate({'left':'0px'})
.animate({'top':'0px'});
このようにすれば上から順番にアニメーションが実行されます。
速度を調節する
「animate」メソッドは第2引数以降でオプションの設定をすることができます。
アニメーション速度を変更するには、第2引数に「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。
javascript
$('#box1').animate({
'left': '500px'
}, 1500);
オプションは次のように記述することもできます。
javascript
$('#box1').animate({
'left': '500px'
},{
'duration': 1500
});
動きに変化をつける（イージングの設定）
そのままだと一定の動きしかしないのでつまらないですが、イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。
標準では「linear」と「swing」の２種類しかありませんが、「jQuery Easing Plugin」などを導入することでバリエーションが増えます。
javascript
$('#box1').animate({
'left': '500px'
},{
'duration': 600,
'easing': 'linear'
});
アニメーションが終わったあとに何かする
アニメーションが終了したら何か処理を実行したいといったケースはよくあります。
そんなときは「complete」オプションに関数を設定してあげます。
javascript
$('#box1').animate({
'left': '500px'
},{
'duration': 600,
'complete': function(){
alert('終わりました');
}
});
以上です。まだオプションなどあったりしますが、これだけでもいろいろできるのではないのかと思います。
参考サイト Effects/API/jQuery
