JqueryUI - 显示

本章将讨论show()方法，它是用于管理 jQueryUI 视觉效果的方法之一。show()方法使用指示的效果显示项目。

show()方法使用指定的效果切换包装元素的可见性。

句法

show ()方法具有以下语法 -

.show( effect [, options ] [, duration ] [, complete ] )
先生。 参数及说明
1

影响

这是一个字符串，指示要用于过渡的效果。这是一个字符串，表示调整元素可见性时要使用的效果。效果如下表所示。
2

选项

这是 Object 类型，表示特定于效果的设置和缓动。此外，每个效果都有自己的一组选项，可以在表jQueryUI Effects中描述的多个效果中通用地指定这些选项。
3

期间

这是数字或字符串类型，决定动画将运行多长时间。它的默认值为400。
4

完全的

这是当该元素的效果完成时为每个元素调用的回调方法。

jQueryUI 效果

下表描述了可以与effects()方法一起使用的各种效果 -

先生。 效果及说明
1

瞎的

以百叶窗的方式显示或隐藏元素：通过向下或向上移动底部边缘，或者向右或向左移动右边缘，具体取决于指定的方向和模式。
2

弹跳

使元素看起来在垂直或水平方向上弹跳，可以选择显示或隐藏元素。
3

夹子

通过将元素的相对边框移动到一起直到它们在中间相遇来显示或隐藏元素，反之亦然。
4

降低

通过使其看起来像是落在页面上或从页面上掉落来显示或隐藏元素。
5

爆炸

通过将元素分割成多个沿径向移动的片段来显示或隐藏元素，就像从页面内爆开一样。
6

褪色

通过调整元素的不透明度来显示或隐藏元素。这与核心淡入淡出效果相同，但没有选项。
7

折叠

通过向内或向外调整相对的边框来显示或隐藏元素，然后对另一组边框执行相同的操作。
8

强调

通过在显示或隐藏元素时暂时更改其背景颜色来引起对元素的注意。
9

噗

在调整其不透明度的同时扩大或缩小元素。
10

搏动

在确保元素按指定显示或隐藏之前，打开和关闭调整元素的不透明度。
11

规模

将元素扩展或收缩指定的百分比。
12

摇

垂直或水平来回摇动元素。
13

尺寸

将元素大小调整为指定的宽度和高度。除了如何指定目标大小之外，与缩放类似。
14

滑动

移动元素，使其看起来滑入或滑出页面。
15

transfer

Animates a transient outline element that makes the element appear to transfer to another element. The appearance of the outline element must be defined via CSS rules for the ui-effects-transfer class, or the class specified as an option.

Examples

The following example demonstrates the use of show() method.

Show with Shake Effect

The following examples demonstrates show() method with shake effect.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI show 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() {
            // run the currently selected effect
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "shake", {times: 10,distance: 100}, 1000, callback);
            };
            
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Show</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">Run Effect</a>
   </body>
</html>

Let us save the above code in an HTML file showexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Click on the Add Class and Remove Class buttons to see the effect of classes on the box.

Show with Blind Effect

The following example demonstrates the use of show() method with blind effect.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI show 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() {
            // run the currently selected effect
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "blind", {times: 10,distance: 100}, 1000, callback);
            };
            
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            
            // set effect from select menu value
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Show</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">Run Effect</a>
   </body>
</html>

Let us save the above code in an HTML file showexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −