jQuery UI Effect

The effect() method is used to apply an animation effect to the element without having to show or hide it. It is one of the method which is used to manage jQuery UI visual effects.

Syntax:

Parameters of effect() method:

Effect: This parameter specifies the effects which are used for transition.
Options: This is used for specifying the specific setting and easing for the effects. Each effect has its own set of options.
Duration: This specifies the time duration and indicates the number of milliseconds of the effect. Its default value is 400.
Complete: It is a callback method. It is called for each element when the effect is completed for the elements.

Most used jQuery UI effects:

Add table:

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

jQuery Shake effect example 1

1. Shake effect:

Let's take an example to specify the shake effect.

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-1 {
            height: 50px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-1').click(function() {
               $( "#box-1" ).effect( "shake", {
                  times: 10,
                  distance: 150
               }, 3000, function() {
               $( this ).css( "background", "#ff4040" );
            });
         });
      });
</script>
</head>
<body>
<div id="box-1">Click here to<br/><b>Shake Me!</b></div>
</body>
</html>

Test it Now

jQuery Bounce Effect example 2

2. Bounce Effect:

Let's take an example to specify the bounce effect.

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-1 {
            height: 50px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-1').click(function() {
               $( "#box-1" ).effect( "bounce", {
                  times: 10,
                  distance: 150
               }, 3000, function() {
               $( this ).css( "background", "#ff4040" );
            });
         });
      });
</script>
</head>
<body>
<div id="box-1">Click here to<br/><b>Bounce Me!</b></div>
</body>
</html>

Test it Now

jQuery Explode Effect example 3

3. Explode Effect:

Let's take an example to specify the explode effect.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "explode",
                  easing: "easeInExpo",
                  pieces: 16,
                  duration: 2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Explode Me!</b></div>
   </body>
</html>

Test it Now

jQuery Blind Effect example 4

4. Blind Effect:

Let's take an example to specify the blind effect.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "blind",
                 duration:0
              });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Blind Me!</b></div>
   </body>
</html>

Test it Now

jQuery Clip Effect example 5

5. Clip Effect:

Let's take an example to specify the clip effect:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "clip",
                duration: 2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Clip Me!</b></div>
   </body>
</html>

Test it Now

jQuery Drop Effect example 6

6. Drop Effect:

Let's take an example to specify the drop effect:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "drop",
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Drop Me!</b></div>
   </body>
</html>

Test it Now

jQuery Fade effect example 7

7. Fade effect:

Let's take an example to specify the fade effect:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "fade",
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Fade Me!</b></div>
   </body>
</html>

Test it Now

jQuery Fold Effect example 8

8. Fold Effect:

Let's take an example to specify fold effect:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 500px;
            width: 500px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "fold",
                  duration: 5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Fold Me!</b></div>
   </body>
</html>

Test it Now

jQuery Highlight Effect example 9

9. Highlight Effect:

Let's take an example to specify the highlight effect.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "highlight",
                 duration:2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Highlight Me!</b></div>
   </body>
</html>

Test it Now

jQuery Puff Effect example 10

10. Puff Effect:

Let's take an example to specify puff effect.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "puff",
                duration:5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Puff Me!</b></div>
   </body>
</html>

Test it Now

jQuery Scale effect example 11

11. Scale effect:

Let's take an example to specify scale effect.

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

Test it Now

jQuery Pulsate Effect example 12

12. Pulsate Effect:

Let's take an example to specify the pulsate effect.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "pulsate",
                duration:5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Pulsate Me!</b></div>
   </body>
</html>

Test it Now

jQuery Size Effect example 13

13. Size Effect:

Let's take an example to resize the box.

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

Test it Now

jQuery Slide Effect example 14

14. Slide Effect:

Let's take an example to specify the slide effect:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 200px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "slide",
                 duration:1000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Slide Me!</b></div>
   </body>
</html>

Test it Now

Next TopicjQuery Interview Questions

← prev next →