obj を表示します。CSSプロパティの display を制御することで実現しています。duration などの詳細は animate() を参照してください。
$("div#d1").show();
obj の表示/非表示を切り替えます。非表示の場合は表示し、表示されている場合は非表示にします。
$("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, step, queue, specialEasing をまとめて指定します。
$("div#d1").animate({ opacity:0 }, { duration: 1000, easing: 'linear', complete: function() { alert("Complete!"); } });
step には、アニメーション実行中に定期的に呼び出される関数を指定します。引数にはプロパティの現在値、および jQuery.fx オブジェクトが渡されます。
$("div#d1").animate({ opacity:0 }, { duration: 1000, step: function(now, fx) { var data = fx.elem.id + " " + fx.prop + ": " + now; $("body").append("<div>" + data + "</div>"); } });
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' }});
アニメーションを行うフレーム間隔をミリ秒単位で指定します。規定値は 13ミリ秒です。
$.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();