jQuery UI Effect

To manage jQuery UI visual effects to apply an animation effect to the element without having to show or hide it, the effect() method is used.

Syntax:

.effect( effect, [options], [duration], [complete] )

Parameters:

  • Effect: Used to specify the effects used for transition.
  • Options: Used to specify the specific setting and easing for the effects, where each effect has its own set of options.
  • Duration: Used to specify the time duration to indicate the number of milliseconds of the effect with a default value of 400.
  • Complete: Called for each element as a callback method when the effect is completed for an element.

Most used jQuery UI effects:

Effect Uses
Blind Used to show or hide the element in the manner of a window blind. Depending upon the specified direction and mode, it moves the bottom edge down or up, or the right edge to the right or left,
Bounce Used to allow the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.
Clip Used to show or hide the element by moving opposite borders of the element together until they meet in the middle, or vice versa.
Explode Used to show or hide the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from the page.
Drop Used to show or hide the element by making it appear to drop onto, or drop off of, the page.
Fade Used to show or hide the element by adjusting its opacity. this is the same as the core fade effects, but without options.
Fold Used to show or hide the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.
Highlight Used to call attention to the element by momentarily changing its background color while showing or hiding the element.
Puff Used to expand or contract the element in place while adjusting its opacity.
Shake Used to shake the element back and forth, either vertically or horizontally.
Scale Used to expand or contract the element by a specified percentage.
Pulsate Used to adjust the opacity of the element on and off before ensuring that the element is shown or hidden as specified.
Size Used to resize the element to a specified width and height. It is similar to the scale except for how the target size is specified.
Slide Used to move the element such that it appears to slide onto or off of the page.
Transfer Used to animate a transient outline element that makes the element appear to transfer to another element. The outline element’s appearance should be defined via css rules for the ui-effects-transfer class, or the class specified as an option.

Example 1: The Shake effect:

<!DOCTYPE html>  
<html lang="en">  
<head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px;
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect( "shake", {  
                  times: 5,  
                  distance: 300  
               }, 2000, function() {  
               $( this ).css( "background", "gray" );  
            });  
         });  
      });  
</script>  
</head>  
<body>  
<div id="box">I love shaking! Click Me!!</b></div>  
</body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are specifying the shake effect.

Example 2: The Bounce Effect:

<!DOCTYPE html>  
<html lang="en">  
<head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px;  
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect( "bounce", {  
                  times: 5,  
                  distance: 300  
               }, 2000, function() {  
               $( this ).css( "background", "gray" );  
            });  
         });  
      });  
</script>  
</head>  
<body>  
<div id="box">Click Me!! Bounce Me!!</b></div>   
</body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are specifying the bounce effect.

Example 3: The Explode Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px;  
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "explode",  
                  easing: "easeInExpo",  
                  pieces: 20,  
                  duration: 1800  
               });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Explode Me!!</b></div>  
   </body>  
</html>

Output 1:

Output 2:

Output 3:

Explanation:

In the above example, we are specifying the explode effect.

Example 4: The Blind Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px;
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "blind",  
                 duration:0  
              });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Blind Me!!</b></div>  
   </body>  
</html>

Output:

Explanation:

In the above example, we are specifying the blind effect.

Example 5: The Clip Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px; 
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "clip",  
                duration: 1800  
               });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Clip Me!!</b></div>  
   </body>  
</html>

Output:

Explanation:

In the above example, we are specifying the clip effect.

Example 6: The Drop Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px; 
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "drop",  
               });  
            });  
         });  
      </script>  
   </head>  
   <body> 
      <div id="box">Click Me!<br/><b>Drop Me!!</b></div>  
   </body>  
</html>

Output:

Explanation:

In the above example, we are specifying the drop effect.

Example 7: The Fade effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px; 
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "fade",  
               });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Fade Me!!</b></div>  
   </body>  
</html>

Output:

Explanation:

In the above example, we are specifying the fade effect.

Example 8: The Fold Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px; 
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "fold",  
                  duration: 4000  
               });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Fold Me!!</b></div>  
   </body>  
</html>

Output 1:

Output 2:

Output 3:

Explanation:

In the above example, we are specifying the fold effect.

Example 9: The Highlight Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px; 
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "highlight",  
                 duration: 3000  
               });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Highlight Me!!</b></div>  
   </body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are specifying the highlight effect.

Example 10: The Puff Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px; 
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "puff",  
                duration: 4000  
               });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Puff Me!!</b></div>  
   </body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are specifying the puff effect.

 

Example 11: The Scale effect:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>scale demo</title>  
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <style>  
  #toggle {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
  }  
  </style>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
</head>  
<body>  
<p>Click Anywhere!<br>Toggle the box!!</p>  
<div id="toggle"></div>  
<script>  
$( document ).click(function() {  
  $( "#toggle" ).toggle( "scale" );  
});  
</script>  
</body>  
</html>

Output:

Explanation:

In the above example, we are specifying the scale effect. Here, the box size toggles, on clicking anywhere on the page.

Example 12: The Pulsate Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px;
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "pulsate",  
                duration: 6000  
               });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Pulsate Me!!</b></div>  
   </body>  
</html>

Output:

Explanation:

In the above example, we are specifying the Pulsate effect.

Example 13: The Size Effect:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>scale demo</title>  
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <style>  
  #toggle {  
    height: 100px;  
    width: 200px;  
    background: crimson;   
  }  
  </style>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
</head>  
<body>  
<p>Click Anywhere!<br> Toggle the box size!!</p>  
<div id="toggle"></div>  
<script>  
$( document ).click(function() {  
  $( "#toggle" ).toggle( "size" );  
});  
</script>  
</body>  
</html>

Output:

Explanation:

In the above example, we are resizing the box. Here, the box size toggles, on clicking anywhere on the page.

Example 14: The Slide Effect:

<!DOCTYPE html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI effect Example</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         #box {  
            height: 100px;  
            width: 200px;  
            background: crimson; 
            color: white;
            font-size: 30px;
            text-align: center; 
            padding: 5px;  
         }  
      </style>  
      <script>  
         $(document).ready(function() {  
            $('#box').click(function() {  
               $( "#box" ).effect({  
                  effect: "slide",  
                 duration: 1500  
               });  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div id="box">Click Me!<br/><b>Slide Me!!</b></div>  
   </body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are specifying the slide effect.

Please Share