jQuery学习笔记 ②
自定义动画函数Custom
animate函数 //用户创建自定义动画的函数
1.animate( params, [duration], [easing], [callback] )
2.animate( params, [options] )
stop函数: //停止所有正在播放的动画
stop( [clearQueue], [gotoEnd] )
参数说明
1.params(可选)
类型:Options
说明:一组包含作为动画属性和终值的样式属性和及其值的集合.
2.duration(可选)
类型:String,Number
说明:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
3.easing(可选)
说明：可实现某种外置效果
4.options参数
类型:Options
说明:一组包含动画选项的值的集合。
讲解:所支持的属性如下:
◆ duration: 与上面的duration参数相同
◆ easing: 与上面的easing参数相同
◆ complete :类型为Function, 在动画完成时执行的函数
◆ step: Callback
◆ queue (Boolean): (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)
5.clearQueue
类型:Boolean
如果设置为true则清空队列
6.gotoEnd
类型:Boolean
立即执行完成当前在播放的动画
自定义动画函数属于高级函数应用，使用此函数可以实现各种丰富的效果，个人感觉jQuery定义动画实在太方便了。
比如说做一个拉升隐藏的效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js" ></script>
6 <script type="text/javascript">
7
8
9 $(document).ready(function(){
10
11 $("#box")
12 .animate( {width: $(window).width()},"slow")
13 .animate( {left: $(window).width(), width: 0, opacity: "hide"} , "slow")
14
15 })
16 </script>
17 <title>方块右滑动</title>
18 <style type="text/css">
19
20 </style>
21 </head>
22
23 <body>
24 <div id="box" style="position:absolute;width:100px;height:200px;border:1px solid #CCC;padding:5px;display:block">我是滑动层</div>
25 </body>
26 </html>
上面的例子中我用了两个animate函数，先是拉升到右侧，再淡出消失，这就是动画序列。如果把两个animate函数写成一个那么就会同时达到parmas所设置的属性，即拉升的同时消失。
下面使用stop函数做一个可控制运动状态的box
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js" ></script>
6<script type="text/javascript">
7
8
9 $(document).ready(function(){
10
11 $("#start").click(function(){
12
13 $("#box")
14 .animate( {left: $(window).width() - $("#box").width()}, 2000)
15
16 })
17
18 $("#stop").click(function(){
19
20 $("#box").stop();
21
22 })
23
24 $("#end").click(function(){
25
26 $("#box").stop( [false], [true])
27
28 })
29 })
30</script>
31<title>方块右滑动</title>
32<style type="text/css">
33
34</style>
35</head>
36
37<body>
38<button id="start" >start</button>
39<button id="stop">stop</button>
40<button id="end">end</button>
41<div id="box" style="position:absolute;width:100px;height:200px;border:1px solid #CCC;padding:5px;display:block">我是滑动层</div>
42</body>
43</html>
全局控制属性
最后讲一下和动画相关的属性:
名称: jQuery.fx.off
返回值: Boolean
说明:
关闭页面上所有的动画。
讲解:
把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：
* 你在配置比较低的电脑上使用jQuery。
* 你的一些用户由于动画效果而遇到了 可访问性问题
当把这个属性设成false之后，可以重新开启所有动画。
1 jQuery.fx.off = true
2 $("#box").hide()
虽然使用了动画效果的hide函数, 但是因为关闭了所有动画, 所以div会立刻隐藏出来而没有淡出效果.
