所属类别
特效(Effects) | 特效核心(Effects Core) | 方法(Methods)
用法
描述:对一个元素应用动画特效。
返回:jQuery
.effect( 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 选项也接受一个字符串,在这种情况下,动画添加到由字符串表示的队列中。
|
.effect()
方法对一个元素应用了一个命名的动画 特效 。许多特效也支持显示或隐藏模式,这些可通过 .show()
、.hide()
和 .toggle()
方法来完成。
实例
对一个 div 应用反弹特效(Bounce Effect)。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.effect() 演示</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>
<p>点击任意地方应用特效。</p>
<div></div>
<script>
$( document ).click(function() {
$( "div" ).effect( "bounce", "slow" );
});
</script>
</body>
</html>