JqueryUI-トグル
この章では、 toggle()jQueryUI視覚効果のメソッド。token（）メソッドは、要素が非表示であるかどうかに応じて、show（）メソッドまたはhide（）メソッドを切り替えます。
構文
ザ・ toggle() メソッドの構文は次のとおりです-
.toggle( effect [, options ] [, duration ] [, complete ] )| シニア番号 | パラメータと説明 |
|---|---|
| 1 | effect これは、トランジションに使用する効果を示す文字列です。これは文字列であり、要素の可視性を調整するときに使用する効果を表します。効果は以下の表にリストされています。 |
| 2 | options これはタイプObjectであり、エフェクト固有の設定とイージングを示します。さらに、各エフェクトには独自のオプションセットがあり、jQueryUIエフェクトの表で説明されている複数のエフェクトに共通して指定できます。 |
| 3 | duration これは数値または文字列のタイプであり、アニメーションの実行時間を決定します。デフォルト値は400です。 |
| 4 | complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。 |
jQueryUIエフェクト
次の表に、effects（）メソッドで使用できるさまざまな効果を示します。
| シニア番号 | 効果と説明 |
|---|---|
| 1 | blind ブラインドのように要素を表示または非表示にします。指定した方向とモードに応じて、下端を上下に移動するか、右端を右または左に移動します。 |
| 2 | bounce 要素を垂直方向または水平方向にバウンスしているように見せ、オプションで要素を表示または非表示にします。 |
| 3 | clip 要素の反対側の境界線を中央で交わるまで一緒に移動するか、またはその逆を行うことで、要素を表示または非表示にします。 |
| 4 | drop 要素をページにドロップまたはドロップオフするように見せることで、要素を表示または非表示にします。 |
| 5 | explode 要素を複数の部分に分割して、ページに内破したり、ページから爆発したりするように半径方向に移動することで、要素を表示または非表示にします。 |
| 6 | fade 不透明度を調整して要素を表示または非表示にします。これはコアフェードエフェクトと同じですが、オプションはありません。 |
| 7 | fold 反対側の境界線を内側または外側に調整し、他の境界線のセットに対して同じことを行うことで、要素を表示または非表示にします。 |
| 8 | highlight 要素を表示または非表示にしながら、背景色を瞬間的に変更することで、要素に注意を促します。 |
| 9 | puff 不透明度を調整しながら、要素を所定の位置で拡大または縮小します。 |
| 10 | pulsate 要素が指定どおりに表示または非表示になるようにする前に、要素の不透明度をオンまたはオフに調整します。 |
| 11 | scale 指定した割合で要素を拡大または縮小します。 |
| 12 | shake 要素を垂直または水平に前後に振る。 |
| 13 | size 要素のサイズを指定された幅と高さに変更します。ターゲットサイズの指定方法を除いて、スケールと同様です。 |
| 14 | slide ページ上またはページ外にスライドするように見えるように要素を移動します。 |
| 15 | transfer 要素が別の要素に転送されているように見せるための一時的なアウトライン要素をアニメーション化します。アウトライン要素の外観は、ui-effects-transferクラスまたはオプションとして指定されたクラスのCSSルールを介して定義する必要があります。 |
例
次の例は、上記の表にリストされているさまざまな効果を持つtoggle（）メソッドの使用を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Toggle Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect" ).toggle('explode', 300);
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
</body>
</html>上記のコードをHTMLファイルに保存しましょう toggleexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-
[切り替え]ボタンをクリックして、クラスがどのように表示および非表示になるかを確認します。