Monday, May 11, 2020

Understanding JQuery Effect Methods



Hello guys! Welcome to a new section of my tutorial on jQuery. In this tutorial post, am going to be discussing about the Effect methods.

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

animate( ) Method

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

Syntax

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 - An optional parameter representing how long the animation would run.
  • easing - An optional parameter representing which easing function to use for the transition.
  • callback - An optional parameter representing 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

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

Syntax

Below is the syntax to use this method -

selector.fadeIn( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow", "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • callback - This optional parameter represents a function 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() jQuery method fades out all matched elements by adjusting their opacity to 0, and as well sets display to "none" and firing an optional callback after completion.

Syntax

Below is the syntax to use this method -

selector.fadeOut( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow", "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • callback - This optional parameter represents a function 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 as well firing an optional callback after completion 

Syntax

Below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow", "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • opacity - A number between 0 and 1, denoting the target opacity.
  • callback - This optional parameter represents a function 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 

The hide( ) method simply 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

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 matched elements using a graceful animation and firing an optional callback after completion.  

Syntax

Below is the syntax for a show( ) method -

selector.hide( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow", "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • callback - This optional parameter represents a function 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 simply shows each of the set of matched elements if they are not shown. There is another form of this method which controls the speed of the animation.   

Syntax

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 matched elements using a graceful animation and firing an optional callback after completion.  

Syntax

Below is the syntax for a show( ) method -

selector.show( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow", "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • callback - This optional parameter represents a function 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

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

Syntax

Below is the syntax to use this method -

selector.slideDown( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow", "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • callback - This optional parameter represents a function 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

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

Syntax

Below is the syntax to use this method -

selector.slideUp( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow", "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • callback - This optional parameter represents a function 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 as well also firing an optional callback after completion.

Syntax

Below is the syntax to use this method -

selector.slideToggle( speed,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow", "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • callback - This optional parameter represents a function 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

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

Syntax

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 animations.   
  • gotoEnd - This is optional boolean parameter. A Boolean(true/false) that when set to true makes the playing animation to 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 toggles displaying each of the set of the matched elements. 

Syntax
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
Below is the syntax to use this method -

selector.toggle( speed  [callback] );

Parameter Details
Below is the description of all the parameters -

  • speed - A string that represents one of the three predefined speeds("slow". "normal", or "fast" or the number of milliseconds to run the animation eg ( 1000 ).
  • callback - This optional parameter represents a function 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 toggles displaying each of the set of matched elements based upon the passed parameter. If true, 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
The 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! We have come to the end of this tutorial on Effect Methods. In my next tutorial, i will be discussing about the  various UI Library Methods in details.

Feel free to ask your questions where necessary and i will attend to them as soon as possible.

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

Share this tutorial if it was helpful to you, thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.