Responsive Advertisement

JqueryUI - Show

JqueryUI - Show, JqueryUI, 

This chapter will discuss the show() method, which is one of the methods used to manage jQueryUI visual effects. show() method displays an item using the indicated effect.
show() method toggles the visibility of the wrapped elements using the specified effect.

Syntax

The show() method has the following syntax −
.show( effect [, options ] [, duration ] [, complete ] )
Sr.No.Parameter & Description
1effect
This is a String indicating which effect to use for the transition.This is a String and represents the effect to use when adjusting the element visibility. The effects are listed in the table below.
2options
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.
3duration
This is of type Number or String and determines how long the animation will run. Its default value is 400.
4complete
This is a callback method called for each element when the effect is complete for this element.

jQueryUI Effects

The following table describes the various effects that can be used with the effects() method −
Sr.No.Effect & Description
1blind
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.
2bounce
Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.
3clip
Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.
4drop
Shows or hides the element by making it appear to drop onto, or drop off of, the page.
5explode
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.
6fade
Shows or hides the element by adjusting its opacity. This is the same as the core fade effects, but without options.
7fold
Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.
8highlight
Calls attention to the element by momentarily changing its background color while showing or hiding the element.
9puff
Expands or contracts the element in place while adjusting its opacity.
10pulsate
Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.
11scale
Expands or contracts the element by a specified percentage.
12shake
Shakes the element back and forth, either vertically or horizontally.
13size
Resizes the element to a specified width and height. Similar to scale except for how the target size is specified.
14slide
Moves the element such that it appears to slide onto or off of the page.
15transfer
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>
Tags
Reactions

Post a Comment

0 Comments