你的位置:首页 > Java教程

[Java教程]jQuery实现的动画简单介绍


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/