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.
