jQuery入門

トップ > jQuery > Effects

◆ Effects(Basic)

obj.show() (1.0)
obj.show([duration][,complete]) (1.0)
obj.show([duration][,easing][,complete]) (1.4.3)
obj.show(options) (1.0)

obj を表示します。CSSプロパティの display を制御することで実現しています。duration などの詳細は animate() を参照してください。

$("div#d1").show();
obj.hide() (1.0)
obj.hide([duration][,complete]) (1.0)
obj.hide([duration][,easing][,complete]) (1.4.3)
obj.hide(options) (1.0)

obj を非表示にします。duration などの詳細は animate() を参照してください。

$("div#d1").hide();
obj.toggle() (1.0)
obj.toggle([duration][,complete]) (1.0)
obj.toggle([duration][,easing][,complete]) (1.4.3)
obj.toggle(options) (1.0)

obj の表示/非表示を切り替えます。非表示の場合は表示し、表示されている場合は非表示にします。

$("div#d1").toggle();

Effects(Fading)

obj.fadeIn([duration][,complete]) (1.0)
obj.fadeIn([duration][,easing][,complete]) (1.4.3)
obj.fadeIn(options) (1.0)

obj をフェードインします。duration などの詳細は animate() を参照してください。

$("div#d1").fadeIn();
obj.fadeOut([duration][,complete]) (1.0)
obj.fadeOut([duration][,easing][,complete]) (1.4.3)
obj.fadeOut(options) (1.0)

obj をフェードアウトします。duration などの詳細は animate() を参照してください。

$("div#d1").fadeOut();
obj.fadeTo(duration, opacity[,complete]) (1.0)
obj.fadeTo(duration, opacity[,easing][,complete]) (1.4.3)

obj の透明度を徐々に opacity に変更します。1.0 が完全表示、0.0 が完全透明です。duration などの詳細は animate() を参照してください。

$("div#d1").fadeTo("normal", 0.2);
obj.fadeToggle([duration][,easing][,complete]) (1.4.4)
obj.fadeToggle(options) (1.4.4)

obj がフェードインされていればフェードアウトし、フェードアウトされていればフェードインします。duration などの詳細は animate() を参照してください。

$("div#d1").fadeToggle();

Effects(Sliding)

obj.slideUp([duration][,complete]) (1.0)
obj.slideUp([duration][,easing][,complete]) (1.4.3)
obj.slideUp(options) (1.0)

obj をスライドアップします。duration などの詳細は animate() を参照してください。

$("div#d1").slideUp();
obj.slideDown([duration][,complete]) (1.0)
obj.slideDown([duration][,easing][,complete]) (1.4.3)
obj.slideDown(options) (1.0)

obj をスライドダウンします。duration などの詳細は animate() を参照してください。

$("div#d1").slideDown();
obj.slideToggle([duration][,complete]) (1.0)
obj.slideToggle([duration][,easing][,complete]) (1.4.3)
obj.slideToggle(options) (1.0)

obj がスライドアップされていればスライドダウンし、スライドダウンされていればスライドアップします。duration などの詳細は animate() を参照してください。

$("div#d1").slideToggle();

Effects(Custom)

obj.animate(properties[, duration][, easing][, complete]) (1.0)
obj.animate(properties, options) (1.0)

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' }});
◆ $.fx.interval (1.4.3)

アニメーションを行うフレーム間隔をミリ秒単位で指定します。規定値は 13ミリ秒です。

$.fx.interval = 100;
$("#box").animate({ width:"300px", height:"300px" });
◆ $.fx.off (1.3)

true を指定すると、アニメーションを無効化し、即座に最終の状態で表示します。

$.fx.interval = 100;
$("#box").animate({ width:"300px", height:"300px" });
obj.queue([queueName]) (1.2)
obj.queue([queueName], newQueue) (1.2)
obj.queue([queueName], callback(next)) (1.2)
◆ $.queue(element[, queueName]) (1.3)

objelement に割り当てられたアニメーションなどの関数のキューを参照します。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.dequeue([queueName]) (1.2)
◆ $.dequeue(element[, queueName]) (1.3)

objelement に割り当てられたキューの次の関数を取り出し、実行します。

$("#d1").animate({ width:"100px" })
        .animate({ height:"100px" })
        .queue(function() {
            alert("Done!");
            $(this).dequeue();
        })
        .animate({ width:"10px" })
        .animate({ height:"10px" });
obj.delay(duration[, queueName]) (1.4)

キューに quration ミリ秒待機する関数を挿入します。

$("#d1").animate({ width:"100px" })
        .animate({ height:"100px" })
        .delay(3000)
        .animate({ width:"10px" })
        .animate({ height:"10px" });
obj.stop([clearQueue][, jumpToEnd]) (1.2)
obj.stop([queueName][, clearQueue][, jumpToEnd]) (1.7)

現在実行中のキューを停止します。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>
obj.clearQueue([queueName]) (1.4)

キューをすべてクリアします。

$("#d1").animate({ width:"100px" })
        .animate({ height:"100px" })
        .animate({ width:"10px" })
        .animate({ height:"10px" });
$("#d1").clearQueue();

Copyright (C) 2013 杜甫々
初版:2013年2月3日
http://www.tohoho-web.com/js/jquery/effects.htm