showメソッド
showメソッドは非表示の
要素をスムーズに表示します。要素の非表示には
hideメソッドを
使用できます。
構文
指定時間（ミリ秒、デフォルトは
400ms）での表示:
.show(継続時間);
時間はミリ秒だけでなく、キーワード
slow (600ms)
と fast (200ms) でも指定できます。値が大きいほど
アニメーションは遅くなります:
.show('slow' または 'fast');
パラメータを指定しない場合、アニメーションは行われず、 要素は瞬時に表示されます:
.show();
2番目のパラメータとしてイージング関数、 3番目のパラメータとしてコールバック関数（アニメーション完了後に実行） を渡すこともできます。両パラメータは任意です:
.show(継続時間, [イージング関数], [コールバック関数]);
メソッドに キー: 値 のペアを含む JavaScriptオブジェクトの形で様々なオプションを 渡すこともできます:
.show(オプション);
このようなオブジェクトは以下の
パラメータと関数を渡すことができます -
duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always。これらの
パラメータの説明は、
animateメソッドのページで
確認できます。例として、
継続時間とイージング関数を設定してみましょう:
.show( {duration: 800, easing: easeInSine} );
例
ボタンクリック後、
showメソッドを使って非表示の段落を
スムーズに表示してみましょう。
キーワード slow を渡すことで速度を
600msに設定します。アニメーション終了後、
コンソールに 'アニメーション完了' と出力します:
<button>テキストを表示</button>
<p style="display: none">テキスト</p>
$('button').click(function() {
$('p').show('slow', function() {
console.log('Animation complete')
});
});
