Sponsored Link
jQuery アニメーションのあれこれ
animateとstopメソッド
animeteメソッド
概要
要素をアニメーションさせます。
構文
$(セレクタ).animate( attr [,duration [,easing [,callback]]] )
- attr
属性を指定します。 - duration
動作完了までの期間を指定します。
ミリ秒単位か、'slow'、'normal'、'fast'
の文字列を指定出来ます。 - easing
イージング(動き方)を指定します。
swing
(規定値)かlinear
を指定します。 - callback
完了後に発火するcallback関数を設定します。
- attr
$(セレクタ).animate( attr [,option] )
- attr
属性を指定します。 - option
各オプションをObjectで指定します。(詳細は後述の使用方法で説明)
- attr
使用方法
1. $(セレクタ).animate( attr [,duration [,easing [,callback]]] )
<button>Click</button>
<div id="box"></div>
#box {
background: #555;
height: 100px;
width: 100px;
}
$(function() {
$('button').on('click', function() {
$('#box').animate(
// attr
{
width: 500,
height: 800
},
// duration
1000,
// easing
'swing',
// callback
function() {
alert('Complete!!!');
});
});
});
また、属性ごとにeasingを設定する事も出来ます。
$(function() {
$('button').on('click', function() {
$('#box').animate({
width: [800, 'swing'],
height: [800, 'linear']
}, 3000, function() {
alert('Complete!!!');
});
});
});
属性には +=
や -=
といった現在の数値から相対的に計算するような演算子も使用できます。
その際は、クォーテーションで囲う必要があります。
<button id="left"><<</button><button id="right">>></button>
<div id="box"></div>
#box {
background: #555;
position: relative;
height: 100px;
width: 100px;
}
$(function() {
var button;
$('button').on('click', function() {
button = this.id;
if (button === "left") {
$('#box').animate({
left: '-=50px'
}, 500, 'linear');
} else {
$('#box').animate({
left: '+=50px'
});
}
});
});
この二つ目のサンプルを確認してもらうと分かりますが、
連続でクリックをすると、どんどんアニメーションのキューが溜まっていきます。
一つ目のサンプルのように、一回きりのアニメーションであればいいのですが、
状況によってアニメーションを変化するものの場合、キューが残り続けるのはよろしくないです。
その場合は、stopメソッドを使用して現在のキューを全て停止した後に、アニメーションをするようにしましょう。
これは後述の stopメソッド の項目を見て下さい。
キューとは?
キュー(queue)
jQueryのアニメ処理は実行と同時に開始されるのではなく、キューと呼ばれる配列に格納されて順々に実行されます。
つまり1つのアニメが完了してから次のアニメが開始されるのです。
jQuery リファレンス:animate( prop, option )
※注意点※
- 数値意外の属性の操作は出来ません。
px
やem
や%
などに指定出来る単位となります。(background-color
の変更は出来ません) - ハイフンを含むプロパティについては、キャメルケースで記載が必要です。
margin-top: 10
はmarginTop: 10
と記載しないと動きません。
2. $(セレクタ).animate( attr [,option] )
キューに追加やアニメーションの間にfunction実行をしない場合は、前者の構文で対応した方がベターです。
- duration
目的の値までの期間をミリ秒で指定 - easing
アニメの加速度のタイプを指定 - queue
アニメをキューに追加するか以下かを指定 - step
アニメの期間に連続して実行するfunctionを指定 - complete
アニメの完了時に実行するfunctionを指定
v1.4〜
- specialEasing
プロパティ(幅や高さなど)毎に個別のイージングを設定します。
v1.8~
- start
アニメが開始された時に実行するfunctionを指定 - progress
アニメの期間に連続して実行するfunctionを指定 - done
アニメが正常終了した時に実行するfunctionを指定 - fail
アニメが異常終了した時(stopされた時)に実行するfunctionを指定 - always
アニメの終了した時(正常/異常にかかわらず)に実行するfunctionを指定
まずは、前者の構文の形で記載してみます。
挙動としては、
- 左に500px動く
- 幅500px 高さ800pxに伸びる
と、なります。
<button>Click</button>
<div id="box"></div>
#box {
background: #555;
height: 100px;
width: 100px;
}
$(function() {
$('button').on('click', function() {
// 右に800px 動く
$('#box').animate({
left: 800
});
// 幅500px 高さ800pxに伸びる
$('#box').animate({
width: 500,
height: 800
}, {
duration: 3000,
easing: 'linear',
complete: function() {
alert("complete!!!!!!!");
}
});
});
});
次にqueue
とstep
を使用した例をみてみます。
基本は前例と同じです。
queue
を false
にした事で、queue
にアニメーションをためません。
左に800px動くアニメーションが終わる前に、次のアニメーションが一緒に発動されます。
step
はアニメーション中に連続でcallbackを起動していきます。
ただ、今回のようなケースは、本来であれば一つのanimateの属性指定の箇所にまとめて記載するのがいいです。
今回は例のため、このような表記をしています。
$(function() {
$('button').on('click', function() {
var str;
// 右に800px 動く
$('#box').animate({
left: 800
}, 3000);
// 幅500px 高さ800pxに伸びる
$('#box').animate({
width: 500,
height: 800
}, {
duration: 3000,
easing: 'linear',
complete: function() {
alert("complete!!!!!!");
},
queue: false,
step: function(val, fx) {
if (fx.prop === "width") {
str = fx.prop + ":" + val + "<br>";
} else {
str += fx.prop + ":" + val;
$('#box').html(str);
}
}
});
});
});
queueプロパティ
には真偽値を指定します。
キューにアニメーションを追加するかどうかを指定します。規定値はtrueです。
animateを同期的に動かすなら true
非同期で動かすなら false
と考えると分かりやすいかもしれません。
stepプロパティ
には引数を設定できます。
function(value, fx) { // 実行したい処理 }
- value
現在の属性の値 - fx
現在アニメーションしている属性のObject- elem
アニメーション中の要素 - start
アニメーションの最初の値 - end
アニメーションの最後の値 - prop
現在のアニメーション状態
- elem
※注意点※
callbackが属性ごとに実行される
今回の例の場合、width
と height
の2つを設定しているので、2回分のfunctionが実行されます。
続いて
specialEasing
を見ていきます。
これは、属性ごとにeasingを設定する サンプル の別方法となります。
挙動は全く同じです。
$(function() {
$('button').on('click', function() {
$('#box').animate({
width: 500,
height: 800
}, {
duration: 3000,
specialEasing: {
width: 'swing',
height: 'linear'
},
complete: function() {
alert("complete!!!!!!");
}
});
});
});
stopメソッド
概要
指定したセレクタのアニメーションを停止します。
構文
$(セレクタ).stop([clearQueue], [gotoEnd])
$(セレクタ).stop(queueName, [clearQueue], [gotoEnd])
- queueName
キューの名前 - clearQueue
現在のanimateメソッドにあるキューをクリアにするか。
規定値はfalse - gotoEnd
現在のアニメーションの終了値まで持っていくか。
規定値はfalse
使用方法
$(function() {
$('button').on('click', function() {
/* 例1 */
$('#box')
.animate({left: 800})
.animate({width: 1000});
// 現在のアニメーションを停止 次の width が発動する。
// stop(false) 及び stop(false, false) と同義
$('#box').stop();
/* 例2 */
$('#box')
.animate({left: 800})
.animate({width: 1000});
// 現在のアニメーションを停止 キューもクリアする。
// widthも発動しない
// stop(true) と同義
$('#box').stop(true, false);
/* 例3 */
$('#box')
.animate({left: 800})
.animate({width: 1000});
// 現在のアニメーションを停止後、終了値まで移動する。
// キューは残すため width は発動する。
$('#box').stop(false, true);
/* 例4 */
$('#box')
.animate({left: 800})
.animate({width: 1000});
// 現在のアニメーションを停止後、終了値まで移動する。
// キューもクリアするため、 width は発動しない。
$('#box').stop(true, true);
});
});
finishメソッド
概要
全てのアニメーションを終了し、最終的な着地点へ移動します。
構文
$(セレクタ).finish([queueName])
使用方法
stopメソッド
と違い、残キューも含めた最終的な着地点へ移動します。
$(function() {
$('button').on('click', function() {
/* 例1 */
$('#box')
.animate({left: 800})
.animate({width: 1000});
// widthを含めたキューの最終地点へ移動します
$('#box').finish();
/* 例2 */
$('#box').queue(function() {
$(this)
.animate({left: 800})
.animate({width: 1000});
});
// widthを含めたキューの最終地点へ移動します
$('#box').finish();
});
});
queueメソッド / dequeueメソッド
概要
- queue
Queueの取得、設定を行ないます。 - dequeue
アニメーションの次のQueueを実行します。
構文
- queue
$(セレクタ).queue([queueName])
$(セレクタ).queue([queueName], array)
$(セレクタ).queue([queueName], func)
queueメソッドは基本的に、dequeueメソッドと合わせて使用します。
使わない例としては後述しますが、queueの数を得たい場合、queueをクリアしたい場合です。
- dequeue
$(セレクタ).dequeue([queueName])
使用方法
アニメーションしない例
dequeueメソッド
を使用していないので発動しません。
例1はcssは発動しますが、その後のanimateはdequeueメソッド
にて呼び出さなければ発動しません。
例2はdequeueメソッド
にて呼び出さなければ発動しません。
例3はqueue名を設定してます。queue名を設定した場合は、dequeueメソッド
にて呼び出さなければcssも発動しません。
発動しない例
$(function() {
$('button').on('click', function() {
/* 例1 */
$('#box').queue(function() {
$(this).css({
backgroundColor: '#000'
});
// ここが発動しない
$(this).animate({
left: 800
});
});
/* 例2 */
$('#box').queue(function() {
// ここから発動しない
$(this).animate({
left: 800
});
});
/* 例3 */
$('#box').queue('name', function() {
// ここから発動しない
$(this).css({
backgroundColor: '#000'
});
$(this).animate({
left: 800
});
});
/* 例4 */
$('#box').queue('name', function() {
// 発動しない
$(this).animate({
left: 800
});
});
// queue名が指定されている場合、dequeueメソッドでも名称指定をしないと発動しません。
$('#box').dequeue();
});
});
成功例
$(function() {
$('button').on('click', function() {
/* 例1 */
$('#box').queue(function() {
$(this).css({
backgroundColor: '#000'
});
$(this).dequeue(); // dequeueで次のqueueを発動させる
$(this).animate({
left: 800
});
});
/* 例2 */
$('#box').queue(function() {
$(this).css({
backgroundColor: '#000'
});
$(this).animate({
left: 800
});
});
// queueメソッドの外でも発動出来る
$('#box').dequeue();
/* 例3 */
$('#box').queue('name', function() {
$(this).css({
backgroundColor: '#000'
});
$(this).animate({
left: 800
});
});
// 対象のqueue名を発動させる
$('#box').dequeue('name');
});
});
queueの数を見る
$(function() {
$('button').on('click', function() {
$('#box').queue(function() {
$(this).css({backgroundColor: '#00f'}).dequeue();
console.log($('#box').queue().length); // <= 0
$(this)
.animate({left: 500}, 1000)
.animate({width: 1000}, 1000);
console.log($('#box7').queue().length); // <= 2
});
$('#box7').animate({top: 500}, 1000);
console.log($('#box7').queue().length); // <= 3
});
});
queueの取消し
$(function() {
$('button').on('click', function() {
// 空の配列を入れる
$('#box').queue([]);
});
});
これは後述のclearQueueメソッドと同じ挙動をします。
現在実行しているアニメーション以外のキューを空にします。
jQuery リファレンス:queue
jQuery リファレンス:dequeue
clearQueueメソッド
概要
Queueの中身を空にします。
構文
$(セレクタ).clearQueue([queueName])
使用方法
$(function() {
$('button').on('click', function() {
/* 例1 */
$('#box')
.animate({left: 800})
.animate({width: 1000});
// left終了までアニメーションします。後のキューは発動しません。
$('#box').clearQueue();
/* 例2 */
$('#box').queue(function() {
$(this)
.animate({left: 800})
.animate({width: 1000});
});
// 例1と挙動は同様です。
$('#box').dequeue().clearQueue();
/* 例3 */
$('#box').queue(function() {
$(this).css({backgroundColor: '#00f'}).dequeue();
$(this)
.animate({left: 800})
.animate({width: 1000}).clearQueue();
});
});
});