Categories
JqueryUI教程

JqueryUI-隐藏

JqueryUI-隐藏


本章将讨论hide()方法,该方法是用于管理jQueryUI视觉效果的方法之一。 effect()方法将动画效果应用于隐藏元素。

句法

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

.hide( effect [, options ] [, duration ] [, complete ] )
Sr.No. Parameter & Description
1

effect

This is a String indicating which effect to use for the transition.

2

options

This is of type Object and indicates effect-specific settings and easing. Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects.

3

duration

This is of type Number or String, and indicates the number of milliseconds of the effect. Its default value is 400.

4

complete

This is a callback method called for each element when the effect is complete for this element.

jQueryUI效果

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

Sr.No. Effect & Description
1

blind

Shows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specified direction and mode.

2

bounce

Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.

3

clip

Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.

4

drop

Shows or hides the element by making it appear to drop onto, or drop off of, the page.

5

explode

Shows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page.

6

fade

Shows or hides the element by adjusting its opacity. This is the same as the core fade effects, but without options.

7

fold

Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.

8

highlight

Calls attention to the element by momentarily changing its background color while showing or hiding the element.

9

puff

Expands or contracts the element in place while adjusting its opacity.

10

pulsate

Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.

11

scale

Expands or contracts the element by a specified percentage.

12

shake

Shakes the element back and forth, either vertically or horizontally.

14

size

Resizes the element to a specified width and height. Similar to scale except for how the target size is specified.

15

slide

Moves the element such that it appears to slide onto or off of the page.

16

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.

例子

以下示例演示了上表中列出的hide()方法的使用,其效果不同。

效果-失明

下面的示例显示了具有效的hide()方法的使用。单击按钮“隐藏效果隐藏”以查看元素隐藏之前的隐藏效果。

<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>
   
   
   
      <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>
   

让我们将以上代码保存在HTML文件hideexample.htm中,并在支持javascript的标准浏览器中将其打开,您应该看到以下输出。现在,您可以处理结果了-

效果-震动

下面的示例示出了使用抖动()方法的使用效果。单击按钮“震动效果隐藏”以在元素隐藏之前查看震动效果。

<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>
   
   
   
      <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>
   

让我们将上面的代码保存在HTML文件hideexample.htm中,并在支持javascript的标准浏览器中将其打开,您还必须看到以下输出。现在,您可以处理结果了-

error: 内容受到保护 !!