Jqueryui-hide

提供：Dev Guides
移動先:案内、検索

JqueryUI-非表示

この章では、jQueryUI視覚効果の管理に使用されるメソッドの1つである* hide（）*メソッドについて説明します。 _effect（）_メソッドは、アニメーション効果を適用して要素を非表示にします。

構文

  • hide（）*メソッドには次の構文があります-
.hide( effect [, options ] [, duration ] [, complete ] )
Sr.No. Parameter & Description
1

effect

これは、トランジションに使用する効果を示す文字列です。

2

options

これはタイプObjectで、エフェクト固有の設定とリンクを示します：/jqueryui/jqueryui_easings [easing]。 さらに、各効果には独自のオプションセットがあり、_jQueryUI Effects_テーブルで説明されている複数の効果で共通に指定できます。

3

duration

これは、Number型またはString型であり、エフェクトのミリ秒数を示します。 デフォルト値は_400_です。

4

complete

これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIの効果

次の表は、_hide（）_メソッドで使用できるさまざまな効果を説明しています-

Sr.No. Effect & Description
1

blind

ウィンドウブラインドのように要素を表示または非表示にします。指定された_direction_および_mode_に応じて、下端を上下または右端を左右に移動します。

2

bounce

要素を垂直方向または水平方向にバウンスさせ、オプションで要素を表示または非表示にします。

3

clip

要素の中央に出会うまで要素の反対側の境界線を移動することにより、要素を表示または非表示にします。

4

drop

要素をページにドロップまたはドロップオフするように表示することにより、要素を表示または非表示にします。

5

explode

要素を複数の部分に分割することにより、要素を表示または非表示にします。要素は、ページに爆発する、またはページから爆発するかのように放射方向に移動します。

6

fade

不透明度を調整して要素を表示または非表示にします。 これはコアフェードエフェクトと同じですが、オプションはありません。

7

fold

要素を表示または非表示にするには、反対側の境界線を内側または外側に調整してから、他の境界線セットに対して同じことを行います。

8

highlight

要素を表示または非表示にしながら、背景色を一時的に変更することにより、要素に注意を促します。

9

puff

不透明度を調整しながら、要素を所定の位置で拡大または縮小します。

10

pulsate

要素が指定どおりに表示または非表示になるようにする前に、要素の不透明度のオンとオフを調整します。

11

scale

指定した割合で要素を拡大または縮小します。

12

shake

要素を前後または左右に振る。

14

size

指定された幅と高さに要素のサイズを変更します。 ターゲットサイズの指定方法を除き、scaleと同様です。

15

slide

ページ上またはページ外にスライドするように要素を移動します。

16

transfer

一時的なアウトライン要素をアニメーション化し、要素を別の要素に転送するように見せます。 アウトライン要素の外観は、ui-effects-transferクラスまたはオプションとして指定されたクラスのCSSルールを介して定義する必要があります。

例

次の例は、上記の表にリストされているさまざまな効果を持つ_hide（）_メソッドの使用を示しています。

効果-ブラインド

次の例は、_blind_効果を持つ_hide（）_メソッドの使用を示しています。 _Blind Effect 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 に保存し、JavaScriptをサポートする標準のブラウザで開くと、次の出力が表示されます。 今、あなたは結果で遊ぶことができます-

エフェクト-シェイク

次の例は、_blind_効果を持つ_shake（）_メソッドの使用を示しています。 _Shake Effect 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-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 に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

「https://www.finddevguides.com/index.php?title=Jqueryui-hide&oldid=2341」から取得
Powered by MediaWiki