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.
Explore	They are 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 it.
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 the specified target size.
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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

Explanation:

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

Syntax:

Most used jQuery UI effects:

Effect

Uses

Blind

Bounce

Clip

Explore

Drop

Fade

Fold

Highlight

Puff

Shake

Scale

Pulsate

Size

Slide

Transfer

Example 1: The Shake effect:

Example 2: The Bounce Effect:

Explanation:

Example 3: The Explode Effect:

Explanation:

Example 4: The Blind Effect:

Explanation:

Example 5: The Clip Effect:

Explanation:

Example 6: The Drop Effect:

Explanation:

Example 7: The Fade effect:

Explanation:

Example 8: The Fold Effect:

Explanation:

Example 9: The Highlight Effect:

Explanation:

Example 10: The Puff Effect:

Explanation:

Example 11: The Scale effect:

Explanation:

Example 12: The Pulsate Effect:

Explanation:

Example 13: The Size Effect:

Explanation:

Example 14: The Slide Effect:

Explanation: