obj を表示します。CSSプロパティの display を制御することで実現しています。duration などの詳細は animate() を参照してください。
$("div#d1").show();
obj の表示/非表示を切り替えます。非表示の場合は表示し、表示されている場合は非表示にします。display に true を指定すると表示、false を指定すると非表示にします。duration などの詳細は animate() を参照してください。
$("div#d1").toggle();
obj の透明度を徐々に opacity に変更します。1.0 が完全表示、0.0 が完全透明です。duration などの詳細は animate() を参照してください。
$("div#d1").fadeTo("normal", 0.2);
obj がフェードインされていればフェードアウトし、フェードアウトされていればフェードインします。duration などの詳細は animate() を参照してください。
$("div#d1").fadeToggle();
obj がスライドアップされていればスライドダウンし、スライドダウンされていればスライドアップします。duration などの詳細は animate() を参照してください。
$("div#d1").slideToggle();
obj にアニメーション効果を適用します。下記の例では、obj が現在の状態(通常 opacity:1.0)から、透明(opacity:0.0)の状態に徐々に変化します。
$(function() {
$("div#d1").animate({ opacity:0 });
});
properties には、アニメーション完了後の CSSプロパティを指定します。
$("div#d2").animate({
opacity: 0,
height: '200px',
width: '200px'
});
height や width などには、現在の値よりも 200 大きな値といった指定も可能です。
$("div#d2").animate({ height:'+=200', width:'-=200' });
duration には変化に要する時間をミリ秒単位、もしくは 'fast', 'normal', 'slow' で指定します。省略時は 400ms になります。
$("div#d1").animate({ opacity:0 }, 1000);
$("div#d1").animate({ opacity:0 }, 'slow');
easing には、変化速度の種別を指定します。'linear' を指定するとリニアに変化し、'swing' を指定すると最初ゆっくり、後半は早く変化します。省略時は 'swing' になります。jQuery UI Effect プラグインを導入することでその他のイーシングを用いることが可能です。
$("div#d1").animate({ opacity:0 }, 'linear');
$("div#d1").animate({ opacity:0 }, 'swing');
complete には、アニメーションが完了した際に呼び出す関数を指定します。
$("div#d1").animate({ opacity:0 }, function() {
alert("Complete!");
});
options には duration, easing, complete の他、下記のオプションをまとめて指定します。
$("div#d1").animate({ opacity:0 }, {
duration: 1000,
easing: 'linear',
complete: function() { alert("Complete!"); }
});
queue には、アニメーション効果の開始をキューイングするか否かを true または false で指定します。下記の例で queue:true を指定すると、まず height が変化し、その後 width が変化しますが、queue:false を指定すると height と width が同時に変化します。未指定時は true になります。
$("div#d1").animate({ height:'200px' }, { queue:false })
.animate({ width:'200px' }, { queue:false });
specialEasing は、CSSプロパティ別に easing を指定したい場合に指定します。jQuery 1.4 以降で使用可能です。
$("div#d1").animate({ height:'200px', width:'200px' },
{ specialEasing: { height:'linear', width:'swing' }});
step には、アニメーション実行中に定期的に呼び出される関数を指定します。CSSを複数指定した場合は複数回呼び出されます。引数にはプロパティの現在値、および $.fx オブジェクトが渡されます。
$("div#d1").animate({ opacity:0 }, {
duration: 1000,
step: function(now, fx) {
console.log(now);
console.log(fx);
}
});
progress には、アニメーション実行中に定期的に呼び出される関数を指定します。CSSを複数指定しても1回のみ呼び出されます。引数にはアニメーションオブジェクト、プロパティの変化率(0.0～1.0)、および残り時間(ミリ秒)が渡されます。jQuery 1.8 で追加されました。
$("div#d1").animate({ opacity:0 }, {
duration: 1000,
progress: function(animation, progress, remain) {
console.log(progress + ":" + remain);
}
});
complete には、アニメーション完了時に呼び出される関数を指定します。
$("div#d1").animate({ opacity:0 }, {
duration: 1000,
complete: function() {
console.log('complete');
}
});
done にはアニメーション正常完了時に、fail にはアニメーションエラー終了時に、always には成功・エラーに関わらずアニメーション完了時に呼び出される関数を指定します。第一引数にはアニメーションオブジェクト、第二引数には、自然終了した場合は undefined、.stop() で目的地まで飛ばして終了した場合は true、.stop() で目的地まで飛ばさずに終了した場合は false が渡されます。jQuery 1.8 で追加されました。
$("div#d1").animate({ opacity:0 }, {
duration: 1000,
done: function(animation, jumpedToEnd) {
console.log('done');
}
});
アニメーションを行うフレーム間隔をミリ秒単位で指定します。規定値は 13ミリ秒です。jQuery 3.0 で廃止されました。
$.fx.interval = 100;
$("#box").animate({ width:"300px", height:"300px" });
true を指定すると、アニメーションを無効化し、即座に最終の状態で表示します。
$.fx.interval = 100;
$("#box").animate({ width:"300px", height:"300px" });
obj や element に割り当てられたアニメーションなどの関数のキューを参照します。queueName を省略すると、アニメーションなどでデフォルトで使用される "fx" という名称のキューが参照されます。
$("#d1").animate({ width:"100px" })
.animate({ height:"100px" })
.animate({ width:"10px" })
.animate({ height:"10px" });
var queue = $("#d1").queue();
$("#log").append("Queue length = " + queue.length); // Queue length = 4
queue(callback(next)) の形式は、対象のキューに新たに関数を追加します。
$("#d1").animate({ width:"100px" })
.animate({ height:"100px" })
.animate({ width:"10px" })
.animate({ height:"10px" })
.queue(function() {
alert("Done!");
});
obj や element に割り当てられたキューの次の関数を取り出し、実行します。
$("#d1").animate({ width:"100px" })
.animate({ height:"100px" })
.queue(function() {
alert("Done!");
$(this).dequeue();
})
.animate({ width:"10px" })
.animate({ height:"10px" });
キューに quration ミリ秒待機する関数を挿入します。
$("#d1").animate({ width:"100px" })
.animate({ height:"100px" })
.delay(3000)
.animate({ width:"10px" })
.animate({ height:"10px" });
現在実行中のキューを停止します。clearQueue に true を指定すると、残りのキューをすべて削除します。jumpToEnd に true を指定すると、現在実行中のアニメーションを最後の状態に遷移させます。規定値は stop(false, false) です。
<script>
var d1;
$(function() {
d1 = $("#d1");
$("#restart").click(function() { d1.stop(true, true).css({ top:0, left:0 }); runIt(); });
$("#stop1").click(function() { d1.stop(false, false); });
$("#stop2").click(function() { d1.stop(true, false); });
$("#stop3").click(function() { d1.stop(false, true); });
$("#stop4").click(function() { d1.stop(true, true); });
runIt();
});
function runIt() {
d1.animate({ top:'+=200' }, 4000)
.animate({ left:'+=200' }, 4000)
.animate({ top:'-=200' }, 4000)
.animate({ left:'-=200' }, 4000, runIt);
}
</script>
<style>
#d1 { width:40px; height:40px; position:absolute; background:green; }
</style>
<div style="position:relative; width:240px; height:240px; border:1px solid gray;">
<div id="d1"></div>
</div>
<button id="restart">Restart</button><br>
<button id="stop1">stop(false, false)</button> - 現在のキューのみを停止<br>
<button id="stop2">stop(true, false)</button> - 現在のキューを停止して残りをクリア<br>
<button id="stop3">stop(false, true)</button> - 現在のキューを最後の状態にする<br>
<button id="stop4">stop(true, true)</button> - 現在のキューを最後の状態にし、残りをクリア<br>
キューをすべてクリアします。
$("#d1").animate({ width:"100px" })
.animate({ height:"100px" })
.animate({ width:"10px" })
.animate({ height:"10px" });
$("#d1").clearQueue();
アニメーションを停止し、キューをすべてクリアし、アニメーションを完了状態にします。
$("#d1").finish();
アニメーションの duration, easing, complate, その他のオプションをまとめて設定します。
$.speed(400, "swing", function() { console.log("Complete!"); });