位置:主页 > 热门文章 >

第五章 jQuery中的动画,第五章jQuery动画

作者:AG88时间:2018-12-26

第五章 jQuery中的动画,第五章jQuery动画

  通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验。

  1.show()方法和hide()方法

  该方法的功能与css()方法设置display属性效果相同。

  给show()方法和hide()方法设置参数能有动画效果。例如 show(600);来设置时长600毫秒,同时改变元素的高度,宽度和不透明度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="澳门百家乐text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } #panel { width: 300px; border: 1px solid #0050D0; } .head { padding: 5px; background: #96E555; cursor: pointer; } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: block; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel h5.head").toggle(function () { $(this).next().hide(600); }, function () { $(this).next().show(600); }) }) </script> </head> <body> <div id="panel"> <h5 > 什么是jQuery?</h5> <div > jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code

  2.fadeIn()方法和fadeOut()方法

  该方法只改变元素的不透明度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } #panel { width: 300px; border: 1px solid #0050D0; } .head { padding: 5px; background: #96E555; cursor: pointer; } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: block; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel h5.head").toggle(function () { $(this).next().fadeOut(); }, function () { $(this).next().fadeIn(); }) }) </script> </head> <body> <div id="panel"> <h5 > 什么是jQuery?</h5> <div > jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code

  3.slideUp()方法和sildeDown()方法

  该方法只改变元素的高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } #panel { width: 300px; border: 1px solid #0050D0; } .head { padding: 5px; background: #96E555; cursor: pointer; } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: block; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel h5.head").toggle(function () { $(this).next().slideUp(); }, function () { $(this).next().slideDown(); }) }) </script> </head> <body> <div id="panel"> <h5 > 什么是jQuery?</h5> <div > jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code

  4.自定义动画方法animate()

  语法:animate(params,speed,callback);

  params:包含样式属性及值的映射,如{prap1:"value1",prop2:"value2",...}

  speed:速度参数,可选。

  callback:动画完成时执行的函数,可选。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { padding: 60px; } #panel { position: relative; width: 100px; height: 100px; border: 1px solid #0050D0; background: #96E555; cursor: pointer; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel").click(function () { $(this).animate({ left: "500px" }, 3000); }) }) </script> </head> <body> <div id="panel"> </div> </body> </html> View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { padding: 60px; } #panel { position: relative; width: 100px; height: 100px; border: 1px solid #0050D0; background: #96E555; cursor: pointer; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel").click(function () { $(this).animate({ left: "500px", height: "200px" }, 3000); }) }) </script> </head> <body> <div id="panel"> </div> </body> </html> View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { padding: 60px; } #panel { position: relative; width: 100px; height: 100px; border: 1px solid #0050D0; background: #96E555; cursor: pointer; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel").click(function () { $(this).animate({ left: "500px" }, 3000) .animate({ height: "200px" }, 3000); }) }) </script> </head> <body> <div id="panel"> </div> </body> </html> View Code

  5.动态回调函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { padding: 60px; } #panel { position: relative; width: 100px; height: 100px; border: 1px solid #0050D0; background: #96E555; cursor: pointer; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel").css("opacity", "0.5"); //设置不透明度 $("#panel").click(function () { $(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000) .animate({ top: "200px", width: "200px" }, 3000, function () { $(this).css("border", "5px solid blue"); }) }); }); </script> </head> <body> <div id="panel"> </div> </body> </html> View Code

  6.停止动画方法stop()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } #panel { width: 60px; border: 1px solid #0050D0; height: 22px; overflow: hidden; } .head { padding: 5px; background: #96E555; cursor: pointer; width: 300px; } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: block; width: 280px; } </style> <script src="../../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel").hover(function () { $(this).stop().animate({ height: "150", width: "300" }, 200); }, function () { $(this).stop().animate({ height: "22", width: "60" }, 300); }); }); </script> </head> <body> <div id="panel"> <h5 > 什么是jQuery?</h5> <div > jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } #panel { width: 60px; border: 1px solid #0050D0; height: 22px; overflow: hidden; } .head { padding: 5px; background: #96E555; cursor: pointer; width: 300px; } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: block; width: 280px; } </style> <script src="../../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel").hover(function () { $(this).stop(true) .animate({ height: "150" }, 200) .animate({ width: "300" }, 300) }, function () { $(this).stop(true) .animate({ height: "22" }, 200) .animate({ width: "60" }, 300) }); }); </script> </head> <body> <div id="panel"> <h5 > 什么是jQuery?</h5> <div > jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code

  7.其他动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { padding: 5px; background: #96E555; cursor: pointer } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#panel h5.head").click(function(){ $(this).next().toggle(); }) }) </script> </head> <body> <div id="panel"> <h5 >什么是jQuery?</h5> <div > jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { padding: 5px; background: #96E555; cursor: pointer } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#panel h5.head").click(function(){ $(this).next().slideToggle(); }) }) </script> </head> <body> <div id="panel"> <h5 >什么是jQuery?</h5> <div > jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { padding: 5px; background: #96E555; cursor: pointer } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#panel h5.head").click(function(){ $(this).next().fadeTo(600, 0.2); }) }) </script> </head> <body> <div id="panel"> <h5 >什么是jQuery?</h5> <div > jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code

PS:参考文献《锋利的jQuery》

  


卫青与霍去病是否有过同性恋史

问题太可笑了

卫青是霍去病的亲舅舅
霍去病的母亲叫卫少儿
是卫青同母异父的姐姐
 
对于JQUERY做树形动态菜单,最好是有详细的例子3Q

推荐你看“jquery实战”视频,第五讲就是联动的,虽然不是树形的但是道理是一样的,看了这个专辑你就基本上掌握jquery了
www.youku.com/playlist_show/id_6411458.html
 

http://www.bkjia.com/jQuery/907070.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/907070.htmlTechArticle第五章 jQuery中的动画,第五章jQuery动画 通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验。 1.show()方法...

本文源自: 凯发娱乐

上一篇:产品多图展示带放大镜代码

下一篇:没有了

热门文章

联系我们