jQuery UI Blind Effect
Last Updated :
18 Jan, 2021
In this article, we are going to show the effect of blind using jQuery UI. All the content will disappear when the action button is clicked which actually triggers the blind effect script.
Syntax:
$( ".selector" ).effect(
selectedEffect, options, time(in ms), callback
);
Parameters:
- selectedEffect: Select any effect given in jQuery UI.
- options: Added for certain functionality (optional)
- time: time to complete the effect in microseconds.
- callback: Added for certain functionality (optional).
Return value: It does not return any value.
Scripts added: Please download the library for including relevant files or use the path for the given scripts below.
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Example: In this example, we are going to show the blind effect using jQuery UI. We will trigger the script using a button.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=
</script>
<script src=
</script>
<script>
$(function () {
function action(selectedEffect) {
$("#effect").effect(selectedEffect, 1200);
};
$("#button").on("click", function () {
action("blind");
return false;
});
});
</script>
<style>
.animation {
width: 500px;
height: 500px;
position: absolute;
}
#button {
padding: .5em 1em;
text-decoration: none;
position: absolute;
}
#effect {
width: 250px;
height: 190px;
padding: 15px;
position: relative;
}
</style>
</head>
<body>
<h3>
Geeks for Geeks Blind
Effect Using jQuery UI
</h3>
<div class="animation">
<div id="effect" class=
"ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"
style="margin: 0; padding: 0.4em;
height: 170px; text-align: center;
background-color: green;">
Geeks For Geeks
</h3>
</div>
</div>
<span style="margin-left: 6em;">
<button id="button" class=
"ui-state-default ui-corner-all"
style="margin-top: 18em;">
Action
</button>
</span>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...