jQueryのUIの例 - 非表示(非表示)
一致する要素を非表示にするカスタムエフェクトを使用してください。
詳細については.hide()
メソッドの詳細については、APIドキュメントを参照してください)(.hideを 。
.hide()デモ
効果をプレビューするには、ボタンをクリックしてください。
<!DOCTYPE HTML> <HTML LANG = "EN"> <ヘッド> <メタ文字セット= "UTF-8"> <タイトル> jQueryのUIエフェクト - .hide()デモ</タイトル> <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト> <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト> <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css"> <スタイル> .toggler {幅:500pxなど;高さ:200pxの;} #button {パディング:.5em 1EM;テキスト装飾:なし;} #effect {幅:240ピクセル;高さ:135px;パディング:0.4em;位置:相対;} #effect H3 {マージン:0;パディング:0.4em;テキスト整列:センター;} </スタイル> <スクリプト> $(関数(){ // {)(現在選ばれているエフェクト機能runEffectを実行します。 //)は(.valエフェクトタイプVAR selectedEffect = $( "#effectTypes」)を求めよ。 //効果のほとんどは、= {}デフォルトの配信オプションのvarオプションを入力する必要はありません。 //必要なパラメータを持ついくつかの特殊効果の場合(selectedEffect === "スケール"){ オプション= {パーセント:0}; }エルス(selectedEffect ===「サイズ」)の場合{ オプション= {へ:{幅:200、高さ:60}}; } //実行の効果$( "#effect」).hide(selectedEffect、オプション、1000年、コールバック); }; //コールバック関数コールバック(){ setTimeoutメソッド(関数(){ $( "#effect」).removeAttr(「スタイル」).hide()フェードイン(); }、1000); }; //選択したメニューの効果$( "#button").click(関数(){に応じた値を設定します runEffect()。 falseを返します。 }); }); </スクリプト> </ HEAD> <ボディ> <DIVクラス= "トグラー"> <DIV ID = "効果"クラス= "UIウィジェットコンテンツUI-コーナー-すべて"> <H3クラス= "UIウィジェットヘッダUI-コーナー-すべて">非表示(非表示)</ H3> <P> Etiamリベロnequeは、Loremの。セッドpede。NULLAのLoremののmetus、adipiscing UT、sedのluctus、hendrerit履歴書、マイルでゼンパー、eleifend NECをluctus。 </ P> </ DIV> </ DIV> <選択名= "効果" ID = "effectTypes"> <オプション値= "ブラインド">シェード・エフェクト(ブラインド効果)</オプション> <オプション値= "バウンス">効果(バウンス効果)リバウンド</オプション> <オプション値= "クリップ">クリップエフェクト(クリップエフェクト)</オプション> <オプション値= "ドロップ">ランディング効果(ドロップエフェクト)</オプション> <オプション値= "爆発">爆発エフェクト(効果を爆発)</オプション> <オプション値= "倍">折りたたみ効果(エフェクトを折る)</オプション> <オプション値= "ハイライト">ハイライト効果(エフェクトを選んで)</オプション> <オプション値= "パフ">膨張効果(パフ効果)</オプション> <オプション値= "脈動">効果(脈動効果)を破っ</オプション> <オプション値= "スケール">ズーム効果(寸法効果)</オプション> <オプション値= "振る">振動効果(シェイク効果)</オプション> <オプション値= "サイズ">サイズ・エフェクト(サイズ効果)</オプション> <オプション値= "スライド">スライド効果(エフェクトをスライド)</オプション> </選択> <a href="#" id="button" class="ui-state-default ui-corner-all">実行影響します</a> </ BODY> </ HTML>