JqueryUI Hide
This chapter will discuss the hide() method, which is one of the methods used to managejQueryUI visual effects. effect() method applies an animation effect to hide elements.
Syntax
The hide() method has the following syntax:
.hide( effect [, options ] [, duration ] [, complete ] )
Parameter
Description
effect
This is a String indicating which effect to use for the transition.
options
This is of type Object and indicates effect-specific settings and easing. Additionally, each effect has its own set of options that can be specified common across multiple effects described in the tablejQueryUI Effects.
duration
This is of type Number or String, and indicates the number of milliseconds of the effect. Its default value is 400.
complete
This is a callback method called for each element when the effect is complete for this element.
jQueryUI Effects
Following table describes the various effects that can be used with the hide() method:
Effect
Description
blind
Shows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specifieddirection and mode.
bounce
Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.
clip
Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.
drop
Shows or hides the element by making it appear to drop onto, or drop off of, the page.
explode
Shows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page.
fade
Shows or hides the element by adjusting its opacity. This is the same as the core fade effects, but without options.
fold
Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.
highlight
Calls attention to the element by momentarily changing its background color while showing or hiding the element.
puff
Expands or contracts the element in place while adjusting its opacity.
pulsate
Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.
scale
Expands or contracts the element by a specified percentage.
shake
Shakes the element back and forth, either vertically or horizontally.
size
Resizes the element to a specified width and height. Similar to scale except for how the target size is specified.
slide
Moves the element such that it appears to slide onto or off of the page.
transfer
Animates a transient outline element that makes the element appear to transfer to another element. The appearance of the outline element must be defined via CSS rules for theui-effects-transfer class, or the class specified as an option.
Examples
The following examples demonstrates the use ofhide() method with different effect listed in the above table.
Effect - Blind
The following example shows the use of hide()method with blind effect. Click on the buttonBlind Effect Hide to see the blind effect before the element hides.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI hide Example</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-headerui-corner-all">Hide</h3>
<p>
Lorem ipsum dolor sitamet, consectetur adipisicing elit,sed do eiusmod tempor incididunt utlabore.
</p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Blind Effect Hide</a>
</body>
</html>
Let's save the above code in an HTML filehideexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:
Hide
Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore.
Blind Effect Hide
Effect - Shake
The following example shows the use of shake()method with blind effect. Click on the buttonShake Effect Hide to see the shake effect before the element hides.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI hide Example</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler-1 { width: 500px; height: 200px; }
#button-1 { padding: .5em 1em; text-decoration: none; }
#effect-1 { width: 240px; height: 135px; 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: 10, distance: 100}, 1000, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// set effect from select menu value
$( "#button-1" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class="toggler-1">
<div id="effect-1" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-headerui-corner-all">Hide</h3>
<p>
Lorem ipsum dolor sitamet, consectetur adipisicing elit,sed do eiusmod tempor incididunt utlabore.
</p>
</div>
</div>
<a href="#" id="button-1" class="ui-state-default ui-corner-all">Shake Effect Hide</a>
</body>
</html>
Let's save the above code in an HTML filehideexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:
Hide
Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore.
Shake Effect Hide
ليست هناك تعليقات:
إرسال تعليق