所属类别
特效(Effects) | 特效核心(Effects Core) | 方法重载(Method Overrides) | 方法(Methods)
用法
描述:使用自定义效果来显示或隐藏匹配的元素。
返回:jQuery
.toggle( effect [, options ] [, duration ] [, complete ] )
参数 |
类型 |
描述 |
默认值 |
effect |
String |
一个字符串,指示要使用哪一种特效。 |
|
options |
Object |
特效具体的设置和 easing。 |
|
duration |
Number 或 String |
一个字符串或一个数字,指定动画将运行多久。 |
400 |
complete |
Function() |
一旦动画完成时要调用的函数。 |
|
参数 |
类型 |
描述 |
options |
Object |
所有的动画设置。唯一一个必需的属性是 effect。
- effect
类型:String
描述:一个字符串,指示要使用哪一种特效。
- easing(默认值:
"swing" )
类型:String
描述:一个字符串,指示要使用的 easing 函数。
- duration(默认值:
400 )
类型:Number 或 String
描述:一个字符串或一个数字,指定动画将运行多久。
- complete
类型:Function()
描述:一旦动画完成时要调用的函数。
- queue(默认值:
true )
类型:Boolean 或 String
描述:一个布尔值,指示是否将动画放在特效队列中。如果是 false,动画将立即开始。自 jQuery 1.7 起,queue 选项也接受一个字符串,在这种情况下,动画添加到由字符串表示的队列中。
|
该插件扩展自 jQuery 内置的 .toggle() 方法。如果 jQuery UI 未加载,调用 .toggle()
方法不会直接失败,因为该方法在 jQuery 中存在。但是不会发生预期的行为。
实例
使用折叠特效(Fold Effect)切换一个 div。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.toggle() 演示</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid #000;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<button>切换 div</button>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" ).toggle( "fold", 1000 );
});
</script>
</body>
</html>