Sunday, May 10, 2020

The Definitive Guide to JQuery Effects



Hello guys! Welcome to a new section of my tutorial on jQuery. In this tutorial, we are going to be looking into the various effects that we can achieve using JQuery.

JQuery provides a simple interface for doing all kinds of amazing effects. The JQuery  methods allows us to quickly apply the commonly used effects with a minimum configuration.

Showing and Hiding Elements

The command for showing and hiding are pretty much what we would expect. show() method to show the element in a wrapped set and hide() method to hide them. 

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; executes once for each element that is animated against.

Following below is the syntax for hide() 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; executes once for each element that is animated against.

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.


toggling the Elements

JQuery provides methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will become hidden; if hidden, it will become visible.

Syntax

Below is the syntax for a toggle( ) 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; executes once for each element that is animated against.

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

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

     </head>

     <body>

          <div  class = "content">
               <div  class = "clickme">Click Me</div>

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

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

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

RECOMMENDED: JQuery AJAX Methods


JQuery Effect Methods

The following table below lists down the most important methods in jQuery which can be used to create different kinds of effects -

Sr.No.Methods & Description
1animate( params, [duration, easing, callback] )
A function for making custom animations.
2fadeIn( speed, [callback] )
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
3fadeOut( speed, [callback] )
Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
4fadeTo( speed, opacity, callback )
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
5hide( )
Hides each of the set of matched elements if they are shown.
6hide( speed, [callback] )
Hide all matched elements using a graceful animation and firing an optional callback after completion.
7show( )
Displays each of the set of matched elements if they are hidden.
8show( speed, [callback] )
Show all matched elements using a graceful animation and firing an optional callback after completion.
9slideDown( speed, [callback] )
Reveal all matched elements by adjusting their height and firing an optional callback after completion.
10slideToggle( speed, [callback] )
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
11slideUp( speed, [callback] )
Hide all matched elements by adjusting their height and firing an optional callback after completion.
12stop( [clearQueue, gotoEnd ])
Stops all the currently running animations on all the specified elements.
13toggle( )
Toggle displaying each of the set of matched elements.
14toggle( speed, [callback] )
Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.
15toggle( switch )
Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements).
16jQuery.fx.off
Globally disable all animations.

In my next tutorial post, i will be using series of examples to explain the above listed methods.



UI Library Based Effects

To use these effects, you can either download the latest jQuery UI Library from the JQuery UI Library or use the Google CDN to use it in a very similar way as we have done for jQuery.

We can use the Google CDN for jQuery UI using the following code snippet in the HTML page -

<head>
     <script  scr  = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
     </script>
</head>        

Sr.No.Methods & Description
1Blind
Blinds the element away or shows it by blinding it in.
2Bounce
Bounces the element vertically or horizontally n-times.
3Clip
Clips the element on or off, vertically or horizontally.
4Drop
Drops the element away or shows it by dropping it in.
5Explode
Explodes the element into multiple pieces.
6Fold
Folds the element like a piece of paper.
7Highlight
Highlights the background with a defined color.
8Puff
Scale and fade out animations create the puff effect.
9Pulsate
Pulsates the opacity of the element multiple times.
10Scale
Shrink or grow an element by a percentage factor.
11Shake
Shakes the element vertically or horizontally n-times.
12Size
Resize an element to a specified width and height.
13Slide
Slides the element out of the viewport.
14Transfer
Transfers the outline of an element to another.

In my subsequent tutorials, i will be using series of examples to explain the above methods.

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 also subscribe to our newsletter to get our latest tutorials delivered directly to your emails.

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.