本章将讨论 show()方法，它是用于管理jQueryUI视觉效果的方法之一. show()方法使用指示的效果显示项目.
show()方法使用以下方法切换包装元素的可见性指定的效果.
show()方法具有以下语法 :
.show( effect [, options ] [, duration ] [, complete ] )
| Sr.No. | 参数&描述 |
|---|---|
| 1 | effect 这是一个字符串，表示要用于转换的效果.这是一个字符串，表示要使用的效果调整元素可见性时.效果列于下表中. |
| 2 | options 这是Object类型，表示特定于效果的设置和缓和.此外，每个效果都有自己的选项集，可以在表 jQueryUI Effects 中描述的多个效果中指定. |
| 3 | duration 这是Number或String类型，它决定了动画的运行时间.它的默认值是 400 . |
| 4 | complete 这是一个调用的回调方法当该元素的效果完成时，每个元素. |
下表描述了可以与effects()方法一起使用的各种效果 :
| 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 来回摇动元素，或者垂直或水平. |
| 13 | size 将元素大小调整为指定的宽度，高度.与规模类似，除了如何指定目标大小. |
| 14 | slide 移动元素使其显示为滑入或滑出页面. |
| 15 | transfer 设置瞬态轮廓元素的动画元素似乎转移到另一个元素.必须通过ui-effects-transfer类的CSS规则或指定为选项的类来定义outline元素的外观. |
以下示例演示了如何使用 show()方法.
以下示例演示 show()方法 shake 效果.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI show 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() {
// run the currently selected effect
function runEffect() {
// run the effect
$( "#effect" ).show( "shake", {times: 10,distance: 100}, 1000, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
$( "#button" ).click(function() {
runEffect();
return false;
});
$( "#effect" ).hide();
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Show</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">Run Effect</a>
</body>
</html>让我们将上述代码保存在HTML文件 showexample.htm 中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果&减去;
单击添加类和删除类按钮以查看类对框的影响.
以下示例演示了使用 show()方法 blind 效果.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI show 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() {
// run the currently selected effect
function runEffect() {
// run the effect
$( "#effect" ).show( "blind", {times: 10,distance: 100}, 1000, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
$( "#effect" ).hide();
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Show</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">Run Effect</a>
</body>
</html>让我们将上述代码保存在HTML文件 showexample.htm 中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果
