jQuery UI hide

To manage jQuery UI visual effects to apply an animation effect to hide elements, the jQuery hide() method is used.

Syntax:

.hide( effect, [options], [duration], [complete] )

Parameters:

  • Effect: Used to define the effects which are used for transition.
  • Options: Used to define the specific setting and easing for the effects, where each effect has its own set of options.
  • Duration: Used to define the time duration and to specify 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 the elements.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI hide 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>
.togglr { width: 300px; height: 150px; }
#btn-1 { padding: .5em 1em; text-decoration: none; }
#effect-1 { width: 200px; height: 100px; padding: 0.4em; position: relative; }
#effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect-1" ).hide( "shake", {times: 5, distance: 300}, 500, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
}, 500 );
};
// set effect from select menu value
$( "#btn-1" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class="togglr">
<div id="effect-1" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Hello World!!</h3>
<p>
Click the button to shake me......
</p>
</div>
</div>
<a href="#" id="btn-1" class="ui-state-default ui-corner-all">Shake Effect Hide Button</a>
</body>
</html>

Explanation:

In the above example, we are using the jQuery UI shake effect with the hide() method. Here, we are applying the shake effect to hide the element.

Please follow and like us:
Content Protection by DMCA.com