本章将讨论 hide()方法,它是用于管理jQueryUI视觉效果的方法之一. effect()方法应用动画效果来隐藏元素.
hide()方法具有以下语法 :
.hide( effect [, options ] [, duration ] [, complete ] )
Sr.No. | 参数&描述 |
---|---|
1 | effect 这是一个字符串,表示用于转换的效果. |
2 | options 这是Object类型,表示效果特定的设置和宽松.此外,每个效果都有自己的选项集,可以在表 jQueryUI Effects 中描述的多个效果中指定. |
3 | duration 这是Number或String类型,表示效果的毫秒数.它的默认值是 400 . |
4 | complete 这是一个调用的回调方法当该元素的效果完成时,每个元素. |
下表描述了可以与 hide()方法一起使用的各种效果 :
Sr.No. | 效果&描述 |
---|---|
1 | blind 以窗帘的方式显示或隐藏元素:向下或向上移动底边,或者右边或右边,取决于指定的方向和模式. |
2 | bounce 使元素看起来在垂直或水平方向上反弹,可选择显示或隐藏元素. |
3 | clip 通过将元素的相对边界移到一起直到它们在中间相遇来显示或隐藏元素,反之亦然. |
4 | drop 显示或隐藏该元素使其显示为掉落或放下页面. |
5 | explode 通过拆分元素来显示或隐藏元素在径向方向上移动的多个部分,就像在页面中插入或爆炸一样. |
6 | fade 通过调整元素来显示或隐藏元素不透明度.这与核心淡入淡出效果相同,但没有选项. |
7 | fold 通过调整对面来显示或隐藏元素边框输入或输出,然后对另一组边框执行相同操作. |
8 | highlight 通过暂时改变来调用元素显示或隐藏元素时的背景颜色. |
9 | puff 扩展或收缩元素到位调整其不透明度. |
10 | pulsate 调整元素的不透明度在确保元素按指定显示或隐藏之前关闭. |
11 | scale 按指定的方式扩展或收缩元素百分比. |
12 | shake 来回摇动元素,或者垂直或水平. |
14 | size 将元素大小调整为指定的宽度,高度.与规模类似,除了如何指定目标大小. |
15 | slide 移动元素,使其显示为滑入或滑出页面. |
16 | transfer 设置瞬态轮廓元素的动画元素似乎转移到另一个元素.必须通过ui-effects-transfer类的CSS规则或指定为选项的类来定义outline元素的外观. |
以下示例演示了使用 hide()方法的不同上表中列出的效果.
以下示例显示 hide()方法的使用使用盲效果.点击按钮盲效隐藏以查看元素隐藏前的盲目效果.
<!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> .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-header ui-corner-all">Hide</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. </p> </div> </div> <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a> </body> </html>
让我们将上述代码保存在HTML文件 hideexample.htm 中,并在支持javascript的标准浏览器中打开它,你应该看到以下输出.现在,您可以使用结果 :
以下示例显示了使用 shake()方法失明效果.单击按钮摇动效果隐藏以在元素隐藏之前查看摇动效果.
<!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> .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-header ui-corner-all">Hide</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. </p> </div> </div> <a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a> </body> </html>
让我们将上述代码保存在HTML文件 hideexample.htm 中,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出.现在,您可以使用结果 :