Understanding JQuery Effect Methods



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about the Effect methods.

Read through very carefully and make sure to ask questions where necessary.

animate( ) Method

The animate() method performs a custom animation of a set of CSS properties.

Syntax

The following below is the syntax to use this method -

selector.animate( params, [duration,  easing,  callback] );        

Parameter Details

Below is the description of all the parameters -

  • params - A map of the CSS properties that the animation will move towards.
  • duration - This is an optional parameter representing how long the animation would run.
  • easing - This parameter is optional and it represents which easing function to use for the transition.
  • callback - This is an optional parameter which represents a function that is going to be called once the animation is set.

Example

Below is an example on how to use 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">
               $( document ).ready( function( )  {
                    
                    $( "#out" ).click( function( ) {
                         $( "#block" ).animate( {
                              width:  "70%" ,
                              opacity:  0.4 ,
                              marginLeft:  "0.6in" ,
                              fontSize:  "3em" ,
                              borderWidth:  "10px"
                         } ,  1500 );
                    } );

                    $( "#in" ).click( function( ) {
                         $( "#block" ).animate( {
                              width:  "100" ,
                              opacity:  1.0 ,
                              marginLeft:  "0in" ,
                              fontSize:  "80%" ,
                              borderWidth:  "1px"
                         } ,  1500 );
                    } ); 

               } );       
          </script>

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

     </head>

     <body>

          <p>Click on any of the buttons below:</p>
          
          <button  id = "out">Animate Out</button>
          <button  Id = "in">Animate In</button>

          <div  id = "block">Hello</div>
     </body>
</html>

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



fadeIn( speed, [callback] ) Method

The fadeIn() method fades in all matched elements by adjusting their opacity and firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.fadeIn( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#in" ).click( function( )  {
                         $( ".target" ).fadeIn( 'slow',   function( )  {
                              $( ".log" ).text( 'Fade In Transition Complete' );
                         } );
                    } );

                    $( "#out" ).click( function( )  {
                         $( ".target" ).fadeOut( 'slow',  function( )  {
                              $( ".log" ).text( 'Fade Out Transition Complete' );
                         } );
                    } );
               } );
          </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 = "out">Fade Out</button>
          <button  id = "in">Fade In</button>

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

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

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

fadeOut( speed, [callback] ) Method

fadeOut() method fades out all the matched elements via adjusting their opacity to 0, and setting the display to "none" and then firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.fadeOut( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#in" ).click( function( )  {
                         $( ".target" ).fadeIn( 'slow',   function( )  {
                              $( ".log" ).text( 'Fade In Transition Complete' );
                         } );
                    } );

                    $( "#out" ).click( function( )  {
                         $( ".target" ).fadeOut( 'slow',  function( )  {
                              $( ".log" ).text( 'Fade Out Transition Complete' );
                         } );
                    } );
               } );
          </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 = "out">Fade Out</button>
          <button  id = "in">Fade In</button>

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

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

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

RECOMMENDED: JQuery AJAX Methods


fadeTo( speed, opacity, callback ) Method

fadeTo() jQuery method fades the opacity of all matched elements to a specified opacity and firing an optional callback after completion

Syntax

The following below is the syntax to use this method -

selector.fadeTo( speed,  opacity[,   callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • opacity - A number between 0 and 1, denoting the target opacity.
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#more" ).click( function( )  {
                         $( ".target" ).fadeTo( 'slow',  0.6,   function( )  {
                              $( ".log" ).text( 'More Opacity Transition Complete' );
                         } );
                    } );

                    $( "#less" ).click( function( )  {
                         $( ".target" ).fadeTo( 'slow',  0.2,  function( )  {
                              $( ".log" ).text( 'Less Opacity Transition Complete' );
                         } );
                    } );
               } );
          </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 = "less">Less Opacity</button>
          <button  id = "more">More Opacity</button>

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

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

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

hide( ) Method

hide( ) method hides each of the set of matched elements if they are shown. There is another form of this method which controls the speed of the animation.

Syntax

The following below is the syntax to use this method -

selector.hide( );

Parameter Details

Below is the description of all the parameters -

  • NA.

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">
               $( document ).ready( function( )  {
                    
                    $( "#show" ).click( function( )  {
                         $( ".mydiv" ).show( );
                    } );

                    $( "#hide" ).click( function( )  {
                         $( ".mydiv" ).hide( );
                    } );
               } );
          </script>

          <style>
               .mydiv {
                    margin: 10px;
                    padding: 10px;
                    border: 3px solid #666;
                    width: 80px; 
                    height: 80px;
               }
          </style>

     </head>

     <body>

          <div  class = "mydiv">
               This is a Square
          </div>
          
          <input  type = "button"  id = "show"  value = "Show" />
          <input  type = "button"  Id = "hide"  value = "Hide" />
     </body>
</html>

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



hide( speed, [callback] )

The hide( speed, [callback] ) hides all the matched elements using a graceful animation and firing an optional callback after completion.

Syntax

The following below is the syntax for a show( ) method -

selector.hide( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#show" ).click( function( )  {
                         $( ".mydiv" ).show( 2000 );
                    } );

                    $( "#hide" ).click( function( )  {
                         $( ".mydiv" ).hide( 2000 );
                    } );
               } );
          </script>

          <style>
               .mydiv {
                    margin: 10px;
                    padding: 10px;
                    border: 3px solid #666;
                    width: 80px; 
                    height: 80px;
               }
          </style>

     </head>

     <body>

          <div  class = "mydiv">
               This is a Square
          </div>
          
          <input  type = "button"  id = "show"  value = "Show" />
          <input  type = "button"  Id = "hide"  value = "Hide" />
     </body>
</html>

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

show( ) Method

The show( ) method shows each of the set of matched elements if not shown. There is another form of this method which controls the speed of the animation.

Syntax

The following below is the syntax to use this method -

selector.show( );

Parameter Details

Below is the description of all the parameters -

  • NA.

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">
               $( document ).ready( function( )  {
                    
                    $( "#show" ).click( function( )  {
                         $( ".mydiv" ).show( );
                    } );

                    $( "#hide" ).click( function( )  {
                         $( ".mydiv" ).hide( );
                    } );
               } );
          </script>

          <style>
               .mydiv {
                    margin: 10px;
                    padding: 10px;
                    border: 3px solid #666;
                    width: 80px; 
                    height: 80px;
               }
          </style>

     </head>

     <body>

          <div  class = "mydiv">
               This is a Square
          </div>
          
          <input  type = "button"  id = "show"  value = "Show" />
          <input  type = "button"  Id = "hide"  value = "Hide" />
     </body>
</html>

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


show( speed, [callback] )

show( speed, [callback] ) shows all of the matched elements using a graceful animation and firing an optional callback after completion.

Syntax

The following below is the syntax for a show( ) method -

selector.show( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#show" ).click( function( )  {
                         $( ".mydiv" ).show( 2000 );
                    } );

                    $( "#hide" ).click( function( )  {
                         $( ".mydiv" ).hide( 2000 );
                    } );
               } );
          </script>

          <style>
               .mydiv {
                    margin: 10px;
                    padding: 10px;
                    border: 3px solid #666;
                    width: 80px; 
                    height: 80px;
               }
          </style>

     </head>

     <body>

          <div  class = "mydiv">
               This is a Square
          </div>
          
          <input  type = "button"  id = "show"  value = "Show" />
          <input  type = "button"  Id = "hide"  value = "Hide" />
     </body>
</html>

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


slideDown( speed, [callback] ) Method

slideDown() method reveals all the matched elements by adjusting their height and firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.slideDown( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#down" ).click( function( )  {
                         $( ".target" ).slideDown( 'slow',   function( )  {
                              $( ".log" ).text( 'Slide Down Transition Complete' );
                         } );
                    } );

                    $( "#up" ).click( function( )  {
                         $( ".target" ).slideUp( 'slow',  function( )  {
                              $( ".log" ).text( 'Slide Up Transition Complete' );
                         } );
                    } );
               } );
          </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 = "up">Slide Up</button>
          <button  id = "down">Slide Down</button>

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

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

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


slideUp( speed, [callback] ) Method

The slideUp() method hides all the matched elements by adjusting their height and firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.slideUp( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#down" ).click( function( )  {
                         $( ".target" ).slideDown( 'slow',   function( )  {
                              $( ".log" ).text( 'Slide Down Transition Complete' );
                         } );
                    } );

                    $( "#up" ).click( function( )  {
                         $( ".target" ).slideUp( 'slow',  function( )  {
                              $( ".log" ).text( 'Slide Up Transition Complete' );
                         } );
                    } );
               } );
          </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 = "up">Slide Up</button>
          <button  id = "down">Slide Down</button>

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

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

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


slideToggle( speed, [callback] ) Method

slideToggle() method toggles the visibility of all matched elements by adjusting their height and also firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.slideToggle( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#toggle" ).click( function( )  {
                         $( ".target" ).slideToggle( 'slow',   function( )  {
                              $( ".log" ).text( 'Toggle Transition Complete' );
                         } );
                    } )
               } );
          </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 = "toggle">Toggle</button>

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

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

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


stop( [clearQueue, gotoEnd] ) Method

The stop([clearQueue, gotoEnd]) method stops all currently running animations on all of the specified elements.

Syntax

The following below is the syntax to use this method -

selector.stop( [clearQueue, gotoEnd] );

Parameter Details

Below is the description of all the parameters -

  • clearQueue - An optional boolean parameter. when set to true clears the animation queue, it effectively stops all the queued animation
  • gotoEnd - This is an optional boolean parameter. Boolean (true/false) that when set to value true makes the playing animation to be immediately complete, including resetting original styles on show and hide and calling the callback function.

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">
               $( document ).ready( function( )  {
                    
                    $( "#go" ).click( function( )  {
                         $( ".target" ).animate( { left:    '+=100px' },  2000 );
                    } );

                    $( "#stop" ).click( function( )  {
                         $( ".target" ).stop( );
                    } );

                    $( "#back" ).click( function( )  {
                         $( ".target" ).animate( { left:     '-=100px' },  2000 );
                    } );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { position:  absolute;  left: 40px;  top: 250px; }
          </style>

     </head>

     <body>

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

          <button  id = "go">GO</button>
          <button  id = "stop">STOP</button>
          <button  id = "back">BACK</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.

toggle( ) Method
toggle() method in jQuery toggles displaying each of the set of the matched elements.

Syntax
The following below is the syntax to use this method -

selector.toggle(  );

Parameter Details
Below is the description of all the parameters -

  • NA.

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">
               $( document ).ready( function( )  {
                    
                    $( "#toggle" ).click( function( )  {
                         $( ".target" ).toggle( );
                    } )
               } );
          </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 = "toggle">Toggle</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.



toggle( speed, [callback] ) Method
The toggle(speed, [callback]) Method toggles displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.

Syntax
The following below is the syntax to use this method -

selector.toggle( speed  [callback] );

Parameter Details
Below is the description of all the parameters -

  • speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
  • callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

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">
               $( document ).ready( function( )  {
                    
                    $( "#toggle" ).click( function( )  {
                         $( ".target" ).toggle( 'slow',   function( )  {
                              $( ".log" ).text( 'Toggle Transition Complete' );
                         } );
                    } );
               } );
          </script>

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

     </head>

     <body>

          <p>Click on the following button below:</p> 
          <button  id = "toggle">Toggle</button>

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

          <div  class = "log"></d>
      
     </body>
</html>

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

toggle( switch ) Method
toggle( switch ) method in jQuery toggles displaying each of the set of matched elements based on the passed parameter. If true, then the parameter shows all the elements, false hides all the elements.

Syntax
Below is the syntax to use this method -

selector.toggle( switch );

Parameter Details
Below is the description of all the parameters -

  • switch - A switch to toggle display on.

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">
               $( document ).ready( function( )  {
                    
                    $( "#false" ).click( function( )  {
                         $( ".target" ).toggle( false );
                    } );

                    $( "#true" ).click( function( )  {
                         $( ".target" ).toggle( true );
                    } );
               } );
          </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 = "false">False Switch</button>
          <button  id = "true">True Switch</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.


jQuery.fx.off( ) Method
jQuery.fx.off( ) method globally disables all the animations.

Syntax
Below is the syntax to use this method -

jQuery.fix.off = [ true  |  false ];

Parameter Details
Below is the description of all the parameters -

  • Boolean - This should be set to either false to enable the animation or true in order to disable all the animations globally.

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">
               $( document ).ready( function( )  {
                    
                    $( "#enable" ).click( function( )  {
                         jQuery.fx.off =  false; 
                    } );

                    $( "#disable" ).click( function( )  {
                         jQuery.fx.off =  true; 
                    } );

                    $( "#go" ).click( function( )  {
                         $( ".target" ).animate( { left:    '+=200px' },  2000 );
                    } );

                    $( "#back" ).click( function( )  {
                         $( ".target" ).animate( { left:     '-=200px' },  2000 );
               } );
          </script>

          <style>
               p { background-color: #666;  width: 200px;  border: 1px solid green;  }
               div { position: absolute;  left: 40px;  top: 250px; }
          </style>

     </head>

     <body>

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

          <button  id = "enable">Enable</button>
          <button  id = "disable">Disable</button>
          <button  id = "go">GO</button>
          <button  id = "back">Back</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.

Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be discussing about the various jQuery UI Library Methods in details.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.