程序博客网 > 自助建站软件

jQuery动画

来源：互联网 发布：自助建站软件 编辑：程序博客网 时间：2024/06/15 18:10

1、最简单的动画：显隐效果

CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。

具体说明如下：

visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。

display   隐藏后，隐藏的元素不再占用文档的位置。

注：这块比较巧，这个样式属性正好帮了我一个忙，事情是这样的：


在这个页面中有设备类型的列表框和抓包网口的多选框，要求选择设备类型选择千兆的时候显示4个抓包网口，选择万兆的时候隐藏掉eth3和eth4两个网口。

我当时第一做法就是把eth3和eth4用span元素包裹，然后选择万兆的时候触发事件让span执行hide()方法。这样就把后两个网口隐藏了，但是有一个问题，当hide()后，页面结

构变乱了，测试部又说不能用disabled="disabled"只读属性代替，正想找个时间让美工帮调一下。晚上看会书就看到了visibility 这个样式属性，正好就用上了。

在jQuery中定义了show()和hide()两种方法进行元素的索引。其实这俩方法内部就是对元素的display样式进行操作。

show()和hide()方法还可以设置参数，第一个参数代表(隐藏)的速度,参数值越小越快(可以是具体的值，如1000代表1000ms,也可以是预定义的字符串：slow、normal、st，分

别代表600 400 和200)，第二个参数也是一个可选参数,表示在动画演示完毕要调用的回调函数。

示例：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> show和hide </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             var t=false;  
  10.             $("input").click(function(){  
  11.                 if(t){  
  12.                     $("div").show(1000,function(){  
  13.                         $("input").val('隐藏元素');  
  14.                     })  
  15.                     t=false;  
  16.                 }  
  17.                 else{  
  18.                     $("div").hide(1000,function(){  
  19.                         $("input").val('显示元素');  
  20.                     })  
  21.                     t=true;  
  22.                 }  
  23.             })  
  24.         })  
  25.   //-->  
  26.   </script>  
  27.  </head>  
  28.  <body >  
  29.     <input type="button" value="隐藏元素" >  
  30.     <div id="" class=""><h1>div元素</h1></div>  
  31.  </body>  
  32. </html></span>  
再看个不带回调函数的：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!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. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { font-size: 13px; line-height: 130%; padding: 60px }  
  9. #panel { width: 300px; border: 1px solid #0050D0 }  
  10. .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }  
  11. .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }  
  12. </style>  
  13. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.     $("#panel h5.head").toggle(function(){  
  17.          $(this).next().hide(600);  
  18.     },function(){  
  19.          $(this).next().show(600);  
  20.     })  
  21. })  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <div id="panel">  
  26.     <h5 class="head">三国杀杀天下</h5>  
  27.     <div class="content">  
  28.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
  29.     </div>  
  30. </div>  
  31. </body>  
  32. </html></span>  
2、淡入淡出

fadeIn()和fadeOut()方法，这两个方法是在一定时间内改变元素的不透明度，直到元素完全消失(或者出现)，语法与show()和hide()相同。

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!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. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { font-size: 13px; line-height: 130%; padding: 60px }  
  9. #panel { width: 300px; border: 1px solid #0050D0 }  
  10. .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }  
  11. .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }  
  12. </style>  
  13. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.     $("#panel h5.head").toggle(function(){  
  17.          $(this).next().fadeOut(1000,function(){  
  18.             alert('回调函数')  
  19.          });  
  20.     },function(){  
  21.          $(this).next().fadeIn(1000);  
  22.     })  
  23. })  
  24. </script>  
  25. </head>  
  26. <body>  
  27. <div id="panel">  
  28.     <h5 class="head">三国杀杀天下</h5>  
  29.     <div class="content">  
  30.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
  31.     </div>  
  32. </div>  
  33. </body>  
  34. </html></span>  
3、伸缩

slideUp()和slideDown()方法  用法与上两组函数相同

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!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. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { font-size: 13px; line-height: 130%; padding: 60px }  
  9. #panel { width: 300px; border: 1px solid #0050D0 }  
  10. .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }  
  11. .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }  
  12. </style>  
  13. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.     $("#panel h5.head").toggle(function(){  
  17.          $(this).next().slideUp(1000,function(){  
  18.             alert('回调函数');  
  19.          });  
  20.     },function(){  
  21.          $(this).next().slideDown();  
  22.     })  
  23. })  
  24. </script>  
  25. </head>  
  26. <body>  
  27. <div id="panel">  
  28.     <h5 class="head">三国杀杀天下</h5>  
  29.     <div class="content">  
  30.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
  31.     </div>  
  32. </div>  
  33. </body>  
  34. </html></span>  
4、自定义动画方法

animate(params,speed,callback)

参数说明：

params：一个包含样式属性及值的映射

sleep：速度参数，可选

callback：在动画完成时执行的函数

(1)、一个最简单的自定义动画

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!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. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { padding: 60px }  
  9. #panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}  
  10. </style>  
  11. <script src="../../scripts/jquery.js" type="text/javascript"></script>  
  12. <script type="text/javascript">  
  13. $(function(){  
  14.     $("#panel").click(function(){  
  15.        $(this).animate({left: "500px"}, 3000);  
  16.     })  
  17. })  
  18. </script>  
  19. </head>  
  20. <body>  
  21. <div id="panel"></div>  
  22. </body>  
  23. </html></span>  
注意：为了使这个元素动起来，要更改元素的left属性。需要注意的是要使用animate()方法之前，为了能影响元素的'left' 'right' 'top'  'bottom'样式属性，必须先把元素的position

属性设置成'relative'或者'sbsolude'。

(2)、累加累减动画

上个例子当中,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:"500px"改成left:"+=500px"或者left:"-=500px"即可。

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").click(function(){  
  3.        $(this).animate({left: "+=500px"}, 3000);  
  4.     })  
  5. })</span>  
(3)、多重动画

A、同时执行多个动画

上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").click(function(){  
  3.        $(this).animate({left: "500px",height:"200px"}, 3000);  
  4.     })  
  5. })</span>  
B、顺序执行动画

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").click(function(){  
  3.        $(this).animate({left: "500px"},3000)  
  4.               .animate({height:"200px"},1000);  
  5.     })  
  6. })</span>  
(4)、综合动画

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这

些效果后让它以淡出的方式隐藏掉。

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").css("opacity",0.5);//设置不透明度  
  3.     $("#panel").click(function(){  
  4.        $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
  5.               .animate({top:"200px",width:"200px"},3000)  
  6.               .fadeOut(1000);  
  7.     })  
  8. })</span>  
(5)、动画回调函数

在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $("#panel").css("opacity",0.5);//设置不透明度  
  3.     $("#panel").click(function(){  
  4.        $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
  5.               .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});  
  6.                 
  7.     })  
  8. })</span>  
这样就把css方法加入到动画队列中了。

5、停止动画和判断是否处于动画状态

(1)、停止元素的动画

stop([clearQueue][,gotoEnd])  两个都是可选参数，都是boolean类型

参数说明：

clearQueue：代表是否清空未执行完的动画队列

gotoEnd     ：代表是否将正在执行的动画跳到末状态

通过一个综合的示例就可以弄明白stop()方法的这两个参数了：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!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. <title>Panel</title>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}    
  8. body { font-size: 13px; line-height: 130%; padding: 60px }  
  9. #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}  
  10. .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}  
  11. .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}  
  12. </style>  
  13. <script src="../../../scripts/jquery.js" type="text/javascript"></script>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.       $("button:eq(0)").click(function () {  
  17.           $("#panel")  
  18.             .animate({height : "150" } , 2000 )  
  19.             .animate({width : "300" } , 2000 )  
  20.             .hide(3000)  
  21.             .animate({height : "show" , width : "show" , opacity : "show" } , 2000 )  
  22.             .animate({height : "500"} , 2000 );  
  23.       });  
  24.       $("button:eq(1)").click(function () {  
  25.           $("#panel").stop();//停止当前动画，继续下一个动画  
  26.       });  
  27.       $("button:eq(2)").click(function () {  
  28.           $("#panel").stop(true);//清除元素的所有动画  
  29.       });  
  30.       $("button:eq(3)").click(function () {  
  31.           $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画  
  32.       });  
  33.       $("button:eq(4)").click(function () {  
  34.           $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态   
  35.       });  
  36.   
  37. })  
  38. </script>  
  39. </head>  
  40. <body>  
  41.  <button>开始一连串动画</button>  
  42.  <button>stop()</button>  
  43.  <button>stop(true)</button>  
  44.  <button>stop(false,true)</button>  
  45.  <button>stop(true,true)</button>  
  46. <div id="panel">  
  47.     <h5 class="head">三国杀杀天下</h5>  
  48.     <div class="content">  
  49.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
  50.     </div>  
  51. </div>  
  52. </body>  
  53. </html></span>  
(2)、判断元素是否处于动画状态

当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。

用法：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">if(!$(element).is(":animated")){  
  2.     //添加新的动画  
  3. }</span>  
6、其他动画方法

除了上面提到的动画方法，jquery中还有3个专门用于交互的动画方法

toggle(speed[,callback])     切换元素可见状态，用来代替hide()和show()的。

slideToggle(speed[,callback])通过调整元素高度来切换可见状态，代替slideUp和slideDown的。

fadeTo(speed,opacity[,callback])将元素的不透明度渐变的调整到某一值。

0 0
自助建站软件 自助建站软件
原创粉丝点击
热门IT博客
js通过标签名获取元素js通过标签名获取元素
如何测试网络的连通性如何测试网络的连通性
二代身份证相片 软件
java 占位符替换 递归
淘宝 t460p 假货
淘宝客群名叫什么好
macbook12寸装windows
淘宝店铺音乐生成器
java 参数null
兵人 淘宝店
全民突击辅助软件
传智播客java全套视频
英语动画片配音软件
画家 知乎
2016网络超级红人节
java培训班周末靠谱吗
linux查看内存插槽
淘宝怎么联系卖家售后
数据挖掘需要会编程吗
游戏补丁软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 母兔没有奶水怎么办 母兔奶水不够怎么办 兔子生崽了怎么办 母兔子没奶怎么办 兔子生了小兔怎么办 刚出生小羊拉稀怎么办 小羊站不起来怎么办 兔宝宝不吃奶怎么办 母兔子奶水不够怎么办 兔子鼻子红了怎么办 母兔死了兔崽子怎么办 被鼯鼠咬伤了怎么办 小兔子不吃母乳怎么办 兔子死活不喝水怎么办 兔子拉屎拉尿怎么办 兔子一天没喝水怎么办 兔子一直在喝水怎么办 小狗生出来不动怎么办 小狗生下来不动怎么办 野兔子不吃东西怎么办 兔子身上长疙瘩怎么办 兔子脸上长脓包怎么办 兔子拉稀拉水怎么办 兔子拉黑色水怎么办 兔子尾巴断了怎么办 小兔子精神不好怎么办 怀孕母兔流产怎么办 兔子蛀牙怎么办 兔子吧 家兔跑丢了怎么办 小兔子生了怎么办 野兔吃黄豆苗怎么办? 挖虫草怎么办上山证 野兽夹子放不平怎么办 兔子牙掉了怎么办 兔子牙断了怎么办 让兔子牙划破怎么办 兔子小腿断了怎么办 兔子脚瘸了怎么办 兔子吃了尿不湿怎么办 兔子脚趾断了怎么办 兔子骨头断了怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里