jQuery UI framework provides effect() method for managing different variety of visual effects on the selected elements without using show() and hide() methods. There are many types of effects which are passed as a parameter to the effect() method.
Syntax:
$(selector).effect(effectType[, options ] [, duration ] [, complete ]);
Parameters: This method accepts four parameters as mentioned above and described below:
- effectType: The type of effect which is chosen for the visual transition of the selected element.
- options: The options or settings are used for easing effects.
- duration: The time or duration in milliseconds used for the animation effect to run. The default value is 400ms.
- complete: This is the callback function which is executed when the visual effect is completed.
Links for jQuery UI:
<link
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>
<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>
There are many variety of effectType which can be passed to the effect() method as per the project requirements. In the following example, we will be only demonstrating some of them along with output images.
Example 1: The following example demonstrates jQuery UI effect() method with shake effect with options settings as time and distance.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI effect method</title>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</script>
<style>
#divID {
width: 200px;
height: 150px;
text-align: center;
background: green;
border: 1px solid black;
}
.height {
height: 10px;
}
</style>
<script>
$(document).ready(function () {
$('#divID').click(function () {
$("#divID").effect("shake", {
times: 20,
distance: 180
}, 3000, function () {
$("#divID").css(
"background", "#ff0000");
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI effect method with shake option </b>
<div class="height"> </div>
<div id="divID">
<span>
Click this to see the Shake effect!
</span>
</div>
</body>
</html>
|
Output:
Example 2: The following code demonstrates jQuery UI effect() method with explode effect with easing setting as “swing”.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI effect with explode </title>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</script>
<style>
#divID {
height: 200px;
width: 200px;
text-align: center;
background: green;
border: 1px solid black;
}
.height {
height: 10px;
}
</style>
<script>
$(document).ready(function () {
$('#divID').click(function () {
$("#divID").effect({
effect: "explode",
easing: "swing",
pieces: 12,
duration: 3000
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI effect method with explode option</b>
<div class="height"></div>
<div id="divID">
<span>
Click this to see the explode effect!
</span>
</div>
</body>
</html>
|
Output:
Example 3: The following example demonstrates the effect() method with bounce effect type.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI effect Method with bounce</title>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</script>
<style>
#divID {
height: 100px;
width: 200px;
background: green;
text-align: center;
border: 1px solid black;
}
.height {
height: 10px;
}
</style>
<script>
$(document).ready(function () {
$('#divID').click(function () {
$("#divID").effect("bounce", {
times: 20,
distance: 200
}, 3000, function () {
$(this).css("background", "#ff0000");
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI effect method with bounce </b>
<div class="height"> </div>
<div id="divID">
<span>
Click this to see bounce effect
</span>
</div>
</body>
</html>
|
Output: