标签：
使用jquery实现的动画简单实例:
下面介绍一段利用jquery实现的动画效果，非常的简单，当然在实际项目中不可能有这么简单的应用，不过可供初学者参考一下大致的实现原理，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #thediv { position:relative; width:100px; height:100px; border:1px solid #0050d0; background:#96e555; cursor:pointer; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#thediv").css("optcity","0.5"); $("#thediv").click(function(){ $(this).animate({ left:"400px", height:"200px", opacity:"1" },300) .animate({ top:"200px", width:"200px" },300) .fadeOut("slow"); }); }) </script> </head> <body> <div id="thediv"></div> </body> </html>
以上代码实现了简单的动画效果，代码比较简单，这里就不多介绍了，可以参阅相关阅读。
相关阅读:
1.css()函数可以参阅jQuery的css()方法一章节。
2.click事件可以参阅jQuery的click事件一章节。
3.animate()函数可以参阅jQuery的animate()方法一章节。
4.fadeOut()函数可以参阅jQuery的fadeOut()方法一章节。
5.链式调用可以参阅javascript链式调用简单介绍一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11836
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/zhengzebiaodashi/p/5140887.html
