.animate()
CSSの値を指定して、アニメーションを表現します。
- .animate( properties [, duration] [, easing] [, complete] ) 1.0追加
- .animate( properties, options ) 1.0追加
- 補足事項
- デモ
.animate( properties [, duration] [, easing] [, complete] ) 1.0追加
戻り値:jQuery
| 引数 | 説明 |
|---|---|
| properties |
型:PlainObject最終的に変化させるCSSのキーと値のマップ値を指定します。 |
| duration |
型:Number or String初期値: 400アニメーションする時間を指定します。 |
| easing |
型:String初期値: swingイージングの種類を指定します。 |
| complete |
型:Function()アニメーションが完了した時に実行したい処理を指定します。 |
500ミリ秒かけて、leftを50pxの位置に不透明度を1に変化するアニメーションです。
$( "p" ).animate({
left: 50, opacity: 1
}, 500 );
下記の例では、#clickme要素をクリックすると、#book要素が5秒かけて、アニメーションします。(引数easingは、省略されています) また、heightに指定されているのはカスタムアニメーションで、要素が表示されていれば徐々に高さが少なくなり0になって非表示、 要素が非表示ならば0から徐々に高さが増えていって表示、といった処理を行います。
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25, // 透明度0.25へ
left: '+=50', // 現在位置から右へ50px移動
height: 'toggle' // (カスタムアニメーション)
}, 5000, function() {
// アニメーション完了後に実行する処理
});
});
.animate( properties, options ) 1.0追加
戻り値:jQuery
| 引数 | 説明 |
|---|---|
| properties | アニメーションで最終的に変化させるCSSのキーと値のマップ値を指定します。 |
| options | 各オプション値を設定します。詳細は下記の通りです。 |
500ミリ秒かけて、leftを50pxの位置に不透明度を1に変化するアニメーションします。 キューは無効を指定されています。
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
補足事項
アニメーションのプロパティと値について
.animate()メソッドはCSSプロパティを指定することで、アニメーションを実現させます。
このプロパティは指定できるプロパティが限定されていることを除き、.css()メソッドに指定する値と似ています。
アニメーションさせるために指定する値は、例外(詳細は後述)を除き数値であるべきです。
ほとんどの非数値の値では、jQueryの基本的な機能でアニメーション化させることが出来ません。
(例えば、width,height,left等はアニメーション化できますが、background-colorは
jQuery.Colorプラグイン抜きでは、アニメーション化することが出来ません)
特に指定が無ければ、指定した値はpx単位として扱われ、他に%とemの単位を指定することが可能です。
加えて、scrollTopとscrollLeftのようなスタイルプロパティではないカスタムプロパティも
アニメーション化することが可能です。
CSSの略記(例: font, background, border)は、完全にはサポートされていません。
例えばもしborder幅をアニメーション化したい場合、少なくともborderスタイルと"auto"以外のborder幅を
事前に設定しておかなければなりません。
また、もしフォントサイズをアニメーション化したい場合、単に"font"ではなく、
"fontSize"またはCSSの"font-size"に該当するプロパティを指定する必要があります。
プロパティは数値に加え、'show','hide','toggle'の文字列を指定することも可能です。
これらの略記はdisplayプロパティを考慮した表示、非表示のカスタムアニメーションを可能にします。
また、値は+=、-=を先頭につけて記述することも可能で、現在値からアニメーションの値を算出します。
アニメーションの略記メソッドである.slideDown()や.fadeIn()とは違い、.animate()はエフェクトによってhidden要素を可視化しません。 例えば、$('someElement').hide().animate({height:'20px'}, 500)と指定しても、要素は隠れたままになります。
Durationについて
Durationにはミリ秒単位の値を指定します。アニメーションには高い値を設定すれば遅くなり、低い値ならば速くなります。 初期値は400でミリ秒で、'fast'と'slow'の文字列を指定すると、前者は200ミリ秒、後者は600ミリ秒を指定したことになります。
アニメーション完了後に実行するコールバック関数について
complete引数に指定するコールバック関数は、アニメーション完了後に実行されます。 これは、一連の動作の中で異なるアニメーションを実現したい場合に有用です。 コールバック関数は引数を受け取れませんが、アニメーション化するDOM要素に引数を設定することが出来ます。 複数のDOM要素がアニメーション化された場合、マッチした各要素ごとにコールバック関数が実行されます。
その他、プロパティやアニメーションについて
位置を示すプロパティ(top, right, bottom, left)は、postionが初期設定でも指定されているstaticの場合は、 エフェクトを視認する事が出来ないことに注意してください。
jQuery UI は、色指定等の非数値プロパティが設定できるように、.animate()メソッドを拡張します。 また、個別にプロパティを指定するのではなく、class指定でアニメーションを行う機能も提供してくれます。
Step関数
2つ目の型の.animate()のoptionsにはstep関数を指定する項目があります。 この関数はアニメーションのステップ毎にコールバックとして呼び出され、 カスタムアニメーションを有効にした際や、アニメーションを変更したい場合に便利です。 step関数は2つの引数(nowとfix)を受け取る事ができ、アニメーション中のDOM要素に設定することが可能です。
step関数は、各アニメーション要素上で各アニメーションされたプロパティに対して呼び出されることに注意してください。 例えば、2つのリスト項目が対象になっている場合、各ステップで4回step関数が実行されることになります。
$('li').animate({
opacity: .5,
height: '50%'
},
{
step: function(now, fx) {
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
$('body').append('<div>' + data + '</div>');
}
});
イージングについて
引数easingには、イージング関数名を指定します。 イージング関数を指定することで、アニメーションの各ポイントでの速度を算出決定し、いわゆる緩急をつける働きをします。 jQueryにはswingとlinearの2つのイージング関数が用意されていますが、 jQuery UI に内包されているイージング関数 を使用することで、より多くの表現が可能になります。
また、 イージング用のjQueryプラグイン も用意されており、 イージング関数のチートシート を参照しながら使用すると便利です。
各プロパティ毎のイージングについて
jQuery1.4から各プロパティ毎にイージングを指定することができるようになりました。 最初のバージョンでは、1つ目にCSSプロパティ、2つ目にイージング関数の配列を指定します。 指定されたイージング関数が定義されてなければ.animate()で指定されているイージング関数が使用され、 その指定も無ければ'swing'が使用されます。
$('#clickme').click(function() {
$('#book').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 5000, 'linear', function() {
$(this).after('<div>アニメーション完了</div>');
});
});
2番目のバージョンでは、options引数内にspecialEasingプロパティを含める事が可能になりました。 このプロパティは、マップ値になっており各CSSプロパティに割り当てるイージング関数をそれぞれ指定することができます。
$('#clickme').click(function() {
$('#book').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
});
全エフェクトの無効化について
.animate()を含む全エフェクトは、$.fx.off = trueを指定することで無効にすることが可能です。 これは、Durationに0を指定したのと同じ効果があります。 詳しくは、$.fx.off をご覧ください。
デモ
ボタンを押すと、DIV要素がアニメーションします。
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca; width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">» 実行</button>
<div id="block">Hello!</div>
<script>
/* 1回のアニメーション内で複数のプロパティを変化させています。 */
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>
</body>
</html>
leftプロパティを現在位置からの相対で指定して、アニメーションします。 連続クリックすると、処理がキューに追加されて実行される事が確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
position:absolute; background-color:#abc;
left:50px; width:90px; height:90px; margin:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
</script>
</body>
</html>
最初に幅を90%に引き伸ばし、次にフォントサイズを拡大し、それが終わるとボーダーのアニメーションが始まります。 1つ目のボタンは、最初の幅の引き伸ばし処理をキューに入れないため、連続して実行した後にリセットを押すと、 その処理だけ行われないことが確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca; width:200px; height:1.1em;
text-align:center; border:2px solid green;
margin:3px; font-size:12px;
}
button {
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go1">» ブロック1実行</button>
<button id="go2">» ブロック2実行</button>
<button id="go3">» 両方実行</button>
<button id="go4">» リセット</button>
<div id="block1">ブロック1</div>
<div id="block2">ブロック2</div>
<script>
$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function(){
$( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function(){
$( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
</script>
</body>
</html>
1つ目のDIVのみを対象にleftプロパティをアニメーションしていますが、 step関数を使用して他のDIV要素に対して、アニメーションをシンクロさせています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px; height: 40px;
float: left; margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="go">実行 »</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<script>
$( "#go" ).click(function(){
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM