jQuery UI API - .show()

カテゴリ

エフェクト（Effects） | エフェクトコア（Effects Core） | メソッドオーバーライド（Method Overrides） | メソッド（Methods）

用法

説明：カスタムエフェクトを使用して、一致する要素を表示します。

戻り値：jQuery

.show( effect [, options ] [, duration ] [, complete ] )

パラメータ 型 説明 デフォルト値
effect String 使用するエフェクトの種類を示す文字列。エフェクト。
options Object エフェクトの具体的な設定とeasing。
duration Number または String アニメーションの実行時間を指定する文字列または数値。 400
complete Function() アニメーション完了時に呼び出される関数。

.show( options )

パラメータ 型 説明
options Object すべてのアニメーション設定。唯一必須のプロパティは effect です。
  • effect
    型：String
    説明：使用するエフェクトの種類を示す文字列。エフェクト。
  • easing（デフォルト値："swing"）
    型：String
    説明：使用するものを示す文字列。easing関数。
  • duration（デフォルト値：400）
    型：Number または String
    説明：アニメーションの実行時間を指定する文字列または数値。
  • complete
    型：Function()
    説明：アニメーション完了時に呼び出される関数。
  • queue（デフォルト値：true）
    型：Boolean または String
    説明：アニメーションをエフェクトキューに入れるかどうかを示すブール値。false の場合、アニメーションはすぐに開始されます。jQuery 1.7 以降queue オプションは文字列も受け付けます。その場合、アニメーションはその文字列で表されるキューに追加されます。

このプラグインは jQuery 組み込みの.show()メソッドを拡張したものです。jQuery UI が読み込まれていない場合、.show()メソッドの呼び出しは直接失敗しません。このメソッドは jQuery に存在するためです。ただし、期待した動作は発生しません。

例

フォールドエフェクト（Fold Effect）を使用して div を表示します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.show() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    display: none;
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<button>显示 div</button>
<div></div>
 
<script>
$( "button" ).click(function() {
  $( "div" ).show( "fold", 1000 );
});
</script>
 
</body>
</html>

その他の拡張