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