标签：
jQuery实现的动画简单介绍:
在网页制作中，使用jQuery可以轻松的实现简单的动画效果，比使用原生的js要简单不少，这是前端程序员的幸运，下面再来对此简单做一些介绍，寄希望能够给需要的朋友带来一定的帮助。
一般来说animate()函数是最为常用的函数:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>动画效果-蚂蚁部落</title> <style type="text/css"> #thediv { width:100px; height:100px; background-color:#00F; margin:0px auto; margin-top:200px; } </style> <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#thediv").animate({ "width":"200px", "height":"200px", "opacity":"1" }) }) </script> </head> <body> <div id="thediv"></div> </body> </html>
animate()函数可以参阅jQuery的animate()方法一章节。
上面的代码就是一个简单的动画实现，可以平滑的设置div的尺寸和透明度。但是动画效果是同步进行的，也就是说宽度和长度还有透明度的设置都是同事进行的，有时候我们希望能够挨个设置，看下面的代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>动画效果-蚂蚁部落</title> <style type="text/css"> #thediv { width:100px; height:100px; background-color:#00F; margin:0px auto; margin-top:200px; } </style> <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#thediv").animate({"width":"200px"}); $("#thediv").animate({"height":"200px"}); $("#thediv").animate({"opacity":"0"}); }) </script> </head> <body> <div id="thediv"></div> </body> </html>
以上代码可以依次设置div的长度宽度和透明度。
在设置动画的时候queue()函数和dequeue()函数也是非常重要的，这里就不介绍了，可以参阅相关阅读。
相关阅读:
1.opacity透明度CSS的opacity属性一章节。
2.queue()函数可以参阅jQuery的queue()方法一章节。
3.dequeue()函数可以参阅jQuery的dequeue()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9474
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/zhengzebiaodashi/p/5095827.html
