首页 > 代码库 > 第五章 jQuery中的动画
第五章 jQuery中的动画
http://www.cnblogs.com/shuibing/p/4080543.html
通过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 class="head"> 什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div></body></html>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 class="head"> 什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div></body></html>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 class="head"> 什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div></body></html>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><!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><!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>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>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 class="head"> 什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div></body></html><!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 class="head"> 什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div></body></html>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 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div></div></body></html><!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 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div></div></body></html>
<!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 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div></div></body></html>第五章 jQuery中的动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。