Tuesday, May 12, 2020

JQuery UI Library Based Methods



Hello guys! Welcome to a new section of my tutorial on JQuery. In this tutorial post, we will be looking at the various JQuery UI Library based effects.

Read through very carefully and ask questions where necessary and i will put you through.

Blind Effect Method

Blind Effect can be used with show/hide/toggle. This blinds the element away or will show it by blinding it in.

Syntax

Below is the syntax to use this method -

selector.hide|show|toggle( "blind",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • direction - The direction of the effect. It can be vertical or horizontal. Default is vertical.
  • mode - The mode of the effect. It can be hide or show. Default is hide. 

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"  
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#hide" ).click( function( )  {
                         $( ".target" ).hide( "blind",  { direction:  "horizontal" },  1000 );
                    } );

                    $( "#show" ).click( function( )  {
                         $( ".target" ).show( "blind",  { direction: "horizontal" }, 1000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
          </style>

     </head>

     <body>

          <p>Click on any of the buttons below:</p>

          <button  id = "hide">Hide</button>
          <button  id = "show">Show</button>

          <div  class = "target">
               <img  src = "./images/query.jpg"   alt = "JQuery"  />
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.



Bounce Effect Method

The Bounce Effect can be used with the effect() method. What this does is that, it bounces the element multiple times, vertically or horizontally.

Syntax

Below is the syntax to use this method -

selector.effect( "bounce",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • direction - Direction of the effect. It can be right, left, up, down. Default is up.
  • distance - Distance to bounce. Default is 20.
  • mode - Mode of the effect. It can be hide, show, or effect. Default is effect.
  • times - Times to bounce. Default is 5.

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               

          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#button" ).click( function( )  {
                         $( ".target" ).effect( "bounce",  { times:  3 },  300 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green; }  
          </style>

     </head>

     <body>

          <p>Click on the buttons below:</p>

          <button  id = "button">Bounce</button>

          <div  class = "target">
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.


Clip Effect Method

Clip Effect can be used with show/hide/toggle. This clips the element vertically or horizontally, on or off.

Syntax

Below is the syntax to use this method -

selector.hide|show|toggle( "clip",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • direction - The direction of the effect. It can be vertical or horizontal. Default is vertical.
  • mode - The mode of the effect. It can be hide or show. Default is hide. 

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"  
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#hide" ).click( function( )  {
                         $( ".target" ).hide( "clip",  { direction:  "horizontal" },  1000 );
                    } );

                    $( "#show" ).click( function( )  {
                         $( ".target" ).show( "clip",  { direction: "horizontal" }, 1000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
          </style>

     </head>

     <body>

          <p>Click on any of the buttons below:</p>

          <button  id = "hide">Hide</button>
          <button  id = "show">Show</button>

          <div  class = "target">
               <img  src = "./images/query.jpg"   alt = "JQuery"  />
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.


Drop Effect Method

Drop Effect can be used with show/hide/toggle. This drops the element away or displaying it by dropping it on.

Syntax

Below is the syntax to use this method -

selector.hide|show|toggle( "drop",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • direction - The direction of the effect. It can be up, down, left, right. Default is left. 
  • mode - The mode of the effect. It can be hide or show. Default is hide. 

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"  
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#hide" ).click( function( )  {
                         $( ".target" ).hide( "drop",  { direction:  "up" },  1000 );
                    } );

                    $( "#show" ).click( function( )  {
                         $( ".target" ).show( "drop",  { direction: "down" }, 1000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
          </style>

     </head>

     <body>

          <p>Click on any of the buttons below:</p>

          <button  id = "hide">Hide</button>
          <button  id = "show">Show</button>

          <div  class = "target">
               <img  src = "./images/query.jpg"   alt = "JQuery"  />
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.


Explode( ) Method

The JQuery Explode( ) effect can be used with show/hide/toggle. This will explode or implode the element into/from many pieces.

Syntax

Below is the syntax to use this method -

selector.hide|show|toggle( "explode",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • pieces - Number of pieces to be exploded to or imploded from. 
  • mode - The mode of the effect. It can be hide or show. Default is hide. 

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"  
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#hide" ).click( function( )  {
                         $( ".target" ).hide( "explode",  { pieces:  16 },  1000 );
                    } );

                    $( "#show" ).click( function( )  {
                         $( ".target" ).show( "explode",  { pieces:  16 }, 1000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green;  }
          </style>

     </head>

     <body>

          <p>Click on any of the buttons below:</p>

          <button  id = "hide">Hide</button>
          <button  id = "show">Show</button>

          <div  class = "target">
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.

Fold( ) Method

The JQuery Fold( ) effect can be used with the show/hide/toggle. This folds the element like a piece of paper.

Syntax

Below is the syntax to use this method -

selector.hide|show|toggle( "fold",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • horizFirst - Whether to fold horizontally first or not. It can be true or false. Default is false.  
  • mode - The mode of the effect. It can be hide or show. Default is hide.
  • size - Size to be folded to. Default is 15. 

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"  
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#hide" ).click( function( )  {
                         $( ".target" ).hide( "fold",  { horizFirst:  true },  1000 );
                    } );

                    $( "#show" ).click( function( )  {
                         $( ".target" ).show( "fold",  { horizFirst:  true }, 1000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green;  }
          </style>

     </head>

     <body>

          <p>Click on any of the buttons below:</p>

          <button  id = "hide">Hide</button>
          <button  id = "show">Show</button>

          <div  class = "target">
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.



Hightlight Effect Method

Highlight Effect method can be used with the effect() method. This will highlight the element's background with a specific color. The Default is yellow.

Syntax

Below is the syntax to use this method -

selector.effect( "highlight",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • color - Highlight color. Default is yellow.
  • mode - The mode of the effect. Could be show, hide. Default is show.

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               

          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#button" ).click( function( )  {
                         $( ".target" ).effect( "highlight",  { color:  "#669966" },  3000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green; }  
          </style>

     </head>

     <body>

          <p>Click on the buttons below:</p>

          <button  id = "button">Highlight</button>

          <div  class = "target"></div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.

puff( ) Method

The JQuery puff( ) effect can be used with the show/hide/toggle. This creates a puff effect by scaling the element up and hiding it at the same time.

Syntax

Below is the syntax to use this method -

selector.hide|show|toggle( "puff",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • mode - The mode of the effect. It can be hide or show. Default is hide.
  • percentage - Percentage to scale to. Default is 150  

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"  
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#hide" ).click( function( )  {
                         $( ".target" ).hide( "puff",  {  },  2000 );
                    } );

                    $( "#show" ).click( function( )  {
                         $( ".target" ).show( "puff",  { percent:  100 }, 2000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green;  }
          </style>

     </head>

     <body>

          <p>Click on any of the buttons below:</p>

          <button  id = "hide">Hide</button>
          <button  id = "show">Show</button>

          <div  class = "target">
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.


Pulsate Effect Method

Pulsate Effect method can be used with the effect() method. This pulsates the opacity of the element multiple times. 

Syntax

Below is the syntax to use this method -

selector.effect( "pulsate",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • times - Times to pulsate. Default is 3.
  • mode - The mode of the effect. Could be show, hide. Default is show.

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               

          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#button" ).click( function( )  {
                         $( ".target" ).effect( "pulsate",  { times:  6 },  3000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green; }  
          </style>

     </head>

     <body>

          <p>Click on the buttons below:</p>

          <button  id = "button">Pulsate</button>

          <div  class = "target"></div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.


Scale( ) Method

The JQuery Scale( ) effect can be used with the show/hide/toggle. This shrinks or will grow an element by a percentage factor.

Syntax

Below is the syntax to use this method -

selector.hide|show|toggle( "scale",  { arguments },  speed );

Parameter Details

Below is the description of all the parameters -

  • direction - The direction of the effect. It can be both vertical or horizontal. Default is both.
  • from - State at beginning, usually not needed. It would be an object and will also be given in the form of { height:..., width:... }.
  • origin - The vanishing point. This is an array and by default set to ['middle', 'center'].
  • percentage - Percentage to scale to. Default is 0/1000.
  • scale - Areas of the element to be resized; both, box, content. Box resizes the border and as well as the padding of the element. Content resizes any content of the element. Default is both.

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"  
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#hide" ).click( function( )  {
                         $( ".target" ).hide( "scale",  { percent: 200,  direction:  'horizontal'  },  2000 );
                    } );

                    $( "#show" ).click( function( )  {
                         $( ".target" ).show( "scale",  { percent: 200,  direction:  'vertical' }, 2000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green;  }
          </style>

     </head>

     <body>

          <p>Click on any of the buttons below:</p>

          <button  id = "hide">Hide</button>
          <button  id = "show">Show</button>

          <div  class = "target">
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.


Shake Effect Method
Shake Effect method can be used with the effect() method. This shakes the element many times, vertically or horizontally.

Syntax
Below is the syntax to use this method -

selector.effect( "shake",  { arguments },  speed );

Parameter Details
Below is the description of all the parameters -

  • times - Times to pulsate. Default is 3.
  • Distance - The distance to shake. Default is 20.
  • direction - The direction of the effect. It can be up, down, right, left. Default is left.

Example
Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               

          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#button" ).click( function( )  {
                         $( ".target" ).effect( "shake",  { times:  6 },  3000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green; }  
          </style>

     </head>

     <body>

          <p>Click on the buttons below:</p>

          <button  id = "button">Shake</button>

          <div  class = "target"></div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.

Size Effect Method
Size Effect method can be used with the effect() method. This resizes an element to a specified width and height. 

Syntax
Below is the syntax to use this method -

selector.effect( "size",  { arguments },  speed );

Parameter Details
Below is the description of all the parameters -

  • from - State at beginning, usually not needed. This an object in the form of {height: .., width:..}   
  • to - Height and width to resize to. This an object in the form of {height: ....,   width: .....}
  • origin - The vanishing point, default, default for show/hide. This is an array and the default will be ['middle', 'center'].
  • scale - Which area of the element will be resized by the method: both, box, content. Box resized the border and padding of the element. Cintent resizes any content inside of the element. Both is the default.

Example
Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               

          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#big" ).click( function( )  {
                         $( ".target" ).effect( "size",  { to:  { width:  200,  height:  200 } },  2000 );
                    } );

                    $( "#small" ).click( function( )  {
                         $( ".target" ).effect( "size" ,  { to:  { width:  10,  height:  10 }  },  2000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { width: 100px;  height: 100px;  background: green; }  
          </style>

     </head>

     <body>

          <p>Click on the buttons below:</p>

          <button  id = "big">Big</button>
          <button  id = "small">Small</button>

          <div  class = "target"></div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.



Slide Effect Method
Slide Effect can be used with show/hide/toggle. This slides the element out of the viewport.

Syntax
Below is the syntax to use this method -

selector.hide|show|toggle( "slide",  { arguments },  speed );

Parameter Details
Below is the description of all the parameters -

  • direction - The direction of the effect. It can be up, down, left, right. Default is left. 
  • mode - The mode of the effect. It can be hide or show. Default is show.
  • distance. - The distance of the effect. It's set to either height or width of the element depending on the direction option.

Example
Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"  
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "#hide" ).click( function( )  {
                         $( ".target" ).hide( "slide",  { direction:  "down" },  1000 );
                    } );

                    $( "#show" ).click( function( )  {
                         $( ".target" ).show( "slide",  { direction: "up" }, 1000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
          </style>

     </head>

     <body>

          <p>Click on any of the buttons below:</p>

          <button  id = "hide">Hide</button>
          <button  id = "show">Show</button>

          <div  class = "target">
          </div>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.

Transfer Effect Method
Transfer Effect method can be used with the effect() method. This transfers the outline of an element to another element. Its useful when you trying to visualize interaction between two or more elements. 

Syntax
Below is the syntax to use this method -

selector.effect( "transfer",  { arguments },  speed );

Parameter Details
Below is the description of all the parameters -

  • className - Optional class name the transfer element will receive.
  • to - JQuery selectors, the element to transfer to.

Example
Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               

          </script> 

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    
                    $( "div" ).click( function( )  {
                         var i =  1  -   $( "div" ).index( this );
                         $( this ).effect( "transfer" ,  { to:  $( "div" ).eq( 1 ) },   1000 );
                    } );
               } );
          </script>

          <style>
               div.green { margin: 0px;  width: 100px;  height: 60px;  background: green;
               border: 2px solid black;  position:  relative; }

               div.red { margin-top: 10px;  width: 50px;  height: 30px;  background: red; 
               border: 2px solid black;  position:  relative; }

               /* Code below is required to show border while transferring. */
               .ui-effects-transfer { border : 2px solid black; }

          </style>

     </head>

     <body>

          <p>Click on the buttons below:</p>

          <button  id = "green"></button>
          <button  id = "red"></button>
      
     </body>
</html>

You can try the above code out to see the result for yourselves.

Alright guys! We have come to the end of this tutorial post. In my next tutorial post, we will be discussing about the jQuery interactions.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If you found this tutorial guide very helpful, then you can share it.

Follow us on our various social media handles to stay updated with our latest tutorials. You can as well subscribe to our newsletter to get our all our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment