.toggle()

http://api.jqueryui.com/1.10/toggle/

カスタムエフェクトを使用して、表示・非表示を切り替えることが出来るようになります。

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

戻り値:jQuery

引数	説明
effect	型：`String` 移行に使用されるエフェクトを指定します。
duration	初期値：`400` 型：`Number` or `String` アニメーション実行時間をミリ秒単位で指定します。
easing	初期値：`"swing"` 型：`String` 移り変わりを表現するイージングの関数を指定します。
complete	型：`Function()` アニメーション完了後に実行するコールバック関数を指定します。

.toggle( options )

戻り値:jQuery

引数説明

options

引数	説明
options	型：`Object` アニメーションの設定を一括で指定します。effectの指定は必須になります。 effect 型:`String` 非表示の移行に使用されるエフェクトを指定します。 easing 初期値：`"swing"` 型：`String` 移り変わりを表現するイージングの関数を指定します。 duration 初期値：`400` 型：`Number` or `String` アニメーション実行時間をミリ秒単位で指定します。 complete 型：`Function()` アニメーション完了後に実行するコールバック関数を指定します。

型：Object

アニメーションの設定を一括で指定します。effectの指定は必須になります。

effect: 型:String
非表示の移行に使用されるエフェクトを指定します。
easing: 初期値："swing"
型：String
移り変わりを表現するイージングの関数を指定します。
duration: 初期値：400
型：Number or String
アニメーション実行時間をミリ秒単位で指定します。
complete: 型：Function()
アニメーション完了後に実行するコールバック関数を指定します。

このメソッドはjQueryの.toggle()メソッドを拡張しています。そのため、jQuery UIがロードされる前に.show()メソッドが呼び出されてもメソッドが存在しないといったエラーは起こらないはずですが、期待した動作も発生しません。

サンプル

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>toggle demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <style>
    div {
        width: 100px;
        height: 100px;
        background: #ccc;
        border: 1px solid #000;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>

<button>toggle the div</button>
<div></div>

<script>
$( "button" ).click(function() {
    $( "div" ).toggle( "fold", 1000 );
});
</script>

</body>
</html>