jQueryのanimateメソッドを使えば自分で好きなようにアニメーションを作ったりできるみたいなので試してみました。実際にちゃんと使ったことがなかったので勉強のためにどんな動きができるのかいくつかサンプルも作ったりしてみたんですが、思ったより簡単にできるのでとても便利ですね。まあ複雑なものは何一つ作ってないんであれなんですが。とりあえず超基本的な使い方を自分用にメモしときます。
[ads_center]
animateの使い方
まずは基本的な構文をということで、使い方はとても簡単で、以下のようにして使います。
$('セレクタ').animate({
プロパティ: 値
});
例えば、widthの値が100pxの要素を200pxにアニメーションさせるにはこんな感じに指定してあげます。
$('#example').animate({
width: 200
});
あと、気をつけたいのがfont-sizeなどといったハイフンで繋がれたプロパティを指定する場合にはそのまま書くのではなくクォーテーションで括るか、キャメル式で書くかのどちらかで記述する必要があるみたいです。
1. 'font-size': 15 2. fontSize: 15
それと、backgroundなど数値としての値がないものは指定できないみたいですね。ということでとりあえず適当にサンプルを作ってみたいと思います。以下、簡単なサンプルです。
サンプル
移動させる
実行をクリックすると要素が斜め下に移動します。リセットで元の位置に戻ります。
移動します
JavaScript
$(function(){
$('#exe1').click(function(){
$('#box1').animate({
top: 200,
left: 500,
});
});
$('#reset1').click(function(){
$('#box1').animate({
top: 0,
left: 0,
});
});
});
HTML
<div id="sample1">
<input type="button" id="exe1" value="実行" />
<input type="button" id="reset1" value="リセット" />
<div id="box1">移動します</div>
</div>
CSS
#sample1 {
border: 1px solid #ccc;
padding: 20px;
overflow: hidden;
}
#box1 {
width: 100px;
height: 100px;
background: pink;
padding: 10px;
position: relative;
}
拡大させる
要素を拡大させたりします。
拡大します
JavaScript
$(function(){
$('#exe2').click(function(){
$('#box2').animate({
width: 200,
height: 200,
});
});
$('#reset2').click(function(){
$('#box2').animate({
width: 100,
height: 100
});
});
});
HTML
<div id="sample2">
<input type="button" id="exe2" value="実行" />
<input type="button" id="reset2" value="リセット" />
<div id="box2">拡大します</div>
</div>
CSS
#sample2 {
border: 1px solid #ccc;
padding: 20px;
overflow: hidden;
}
#box2 {
width: 100px;
height: 100px;
background: pink;
padding: 10px;
}
文字を大きくする
文字が大きくなります
JavaScript
$(function(){
$('#exe3').click(function(){
$('#box3').animate({
fontSize: 17
}, 200);
});
$('#reset3').click(function(){
$('#box3').animate({
'font-size': 12
}, 200);
});
});
HTML
<div id="sample3">
<input type="button" id="exe3" value="実行" />
<input type="button" id="reset3" value="リセット" />
<div id="box3">文字が大きくなります</div>
</div>
CSS
#sample3 {
border: 1px solid #ccc;
padding: 20px;
}
#box3 {
background: pink;
padding: 10px;
font-size: 12px;
}
移動した後に背景の色を変更する
左から右へ移動した後にコールバックで背景の色を変える指定をしています。逆に戻った後は背景を元に色に変更します。
移動した後に背景色を変えます
JavaScript
$(function(){
$('#exe4').click(function(){
$('#box4').animate({
left: 500
}, 1000, function(){
$(this).css({
background: 'red'
});
});
});
$('#reset4').click(function(){
$('#box4').animate({
left: 0
}, 1000, function(){
$(this).css({
background: 'pink'
});
});
});
});
HTML
<div id="sample4">
<input type="button" id="exe4" value="実行" />
<input type="button" id="reset4" value="リセット" />
<div id="box4">移動しました後に背景色を変えます</div>
</div>
CSS
#sample4 {
border: 1px solid #ccc;
padding: 20px;
overflow: hidden;
}
#box4 {
width: 100px;
height: 100px;
background: pink;
padding: 10px;
position: relative;
}
左右のボックスが上下逆方向に移動する
左のボックスが真上に移動して、右のボックスが真下に移動します。移動した後は隠れていたテキストが表示されます。
サンプルテキスト
JavaScript
$(function(){
$('#exe5').click(function(){
$('#box5-2').animate({
top: 120
}, 1000);
$('#box5-3').animate({
top: -120
}, 1000);
});
$('#reset5').click(function(){
$('#box5-2').animate({
top: 0
}, 500);
$('#box5-3').animate({
top: 0
}, 500);
});
});
HTML
<div id="sample5">
<input type="button" id="exe5" value="実行" />
<input type="button" id="reset5" value="リセット" />
<div id="box5">
<div id="box5-1">サンプルテキスト</div>
<div id="box5-2"></div>
<div id="box5-3"></div>
</div>
</div>
CSS
#sample5 {
border: 1px solid #ccc;
padding: 20px;
overflow: hidden;
}
#box5 {
width: 100px;
height: 100px;
background: pink;
padding: 10px;
position: relative;
overflow: hidden;
}
#box5-2 {
background: red;
width: 60px;
height: 120px;
position: absolute;
top: 0;
left: 0;
}
#box5-3 {
background: blue;
width: 60px;
height: 120px;
position: absolute;
top: 0;
right: 0;
}
まとめ
なんか余計なコードとかありそうですがとりあえず手軽にこんな感じで色々と作れるのがいいですね。animateメソッドだけでもかなり幅広いことができそうな感じです。今後もちょこちょこ弄りながら遊んでいきたいです。
