このサンプルは、jQueryのshow()コールバックを利用して不可視状態になっているspan要素を可視状態に切り替えます。サンプルの[show]ボタンをクリックするとspan要素が順番に可視状態になって表示されます。[hide]ボタンをクリックすると再び不可視状態になって消えます。
show(speed[,callback])メソッドの引数1(speed)には、{fast|normal|slow}などのスピードを指定します。なお、スピードは「1000」のように直接MS(ミリセカンド)単位で時間を指定することもできます。
引数2(callback)には、コールバック関数名を指定します。ここでは、匿名関数を使用しています。
$(this)には、今処理中のspan要素が格納されています。$(this).next()では、カレントの次のspan要素に移動します。show()メソッドの引数2に匿名関数を指定するときは、
arguments.calleeのように記述します。
$("#btnShow").click(function() {
$("span:eq(0)").show("normal", function() {
$(this).next().show("normal", arguments.callee);
});
});
<button id="btnShow" type="button">Show</button>
<span>Hello,</span>
<span>how</span>
<span>are</span>
<span>you?</span>
show()メソッドの引数に匿名関数を使用したくないときは以下にように記述します。
$("#btnShow").click(function() {
$("span:eq(0)").show("normal", showIt);
});
function showIt() {
$(this).next().show("normal", showIt);
}
このサンプルは、jQueryのshow()コールバックを利用して不可視状態になっているspan要素を可視状態に切り替えます。サンプルの[show]ボタンをクリックするとspan要素が順番に可視状態になって表示されます。[hide]ボタンをクリックすると再び不可視状態になって消えます。
show(speed[,callback])メソッドの引数1(speed)には、{fast|normal|slow}などのスピードを指定します。なお、スピードは「1000」のように直接MS(ミリセカンド)単位で時間を指定することもできます。
引数2(callback)には、コールバック関数名を指定します。ここでは、匿名関数を使用しています。
$(this)には、今処理中のspan要素が格納されています。$(this).next()では、カレントの次のspan要素に移動します。show()メソッドの引数2に匿名関数を指定するときは、
arguments.calleeのように記述します。
$("#btnShow").click(function() {
$("span:eq(0)").show("normal", function() {
$(this).next().show("normal", arguments.callee);
});
});
<button id="btnShow" type="button">Show</button>
<span>Hello,</span>
<span>how</span>
<span>are</span>
<span>you?</span>
show()メソッドの引数に匿名関数を使用したくないときは以下にように記述します。
$("#btnShow").click(function() {
$("span:eq(0)").show("normal", showIt);
});
function showIt() {
$(this).next().show("normal", showIt);
}