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/

爱程序网

Tags：[db:关键字]