你的位置:首页 > Java教程

[Java教程]使用jquery实现的动画简单实例


使用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/