本章将讨论 effect()方法，它是用于管理jQueryUI视觉效果的方法之一. effect()方法将动画效果应用于元素，而不必显示或隐藏它.
effect()方法具有以下语法 :
.effect( 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 | ounce 使元素看起来在垂直或水平方向上反弹，可选择显示或隐藏元素. |
| 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元素的外观. |
以下示例演示了使用 effect()方法的不同上表中列出的效果.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI effect 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>
#box-1 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-1').click(function() {
$( "#box-1" ).effect( "shake", {
times: 10,
distance: 100
}, 3000, function() {
$( this ).css( "background", "#cccccc" );
});
});
});
</script>
</head>
<body>
<div id = "box-1">Click On Me</div>
</body>
</html>让我们将上述代码保存在HTML文件中 effectexample.htm 并在支持javascript的标准浏览器中打开它，你应该看到以下输出.现在，您可以使用结果&减去;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI effect 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>
#box-2 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-2').click(function() {
$( "#box-2" ).effect({
effect: "explode",
easing: "easeInExpo",
pieces: 4,
duration: 5000
});
});
});
</script>
</head>
<body>
<div id="box-2"></div>
</body>
</html>让我们将上述代码保存在HTML文件中 effectexample.htm 并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果&减去;
