当前位置：首页 → 问答吧 → 如何能简单的让一些列元素依次做动画？

如何能简单的让一些列元素依次做动画？

时间：2010-02-04

来源：互联网

我是刚学jquery的新手，有两个问题想请教~~
1.想让某个元素做动画，可以用链式写法。但是如何能让一些列元素依次做动画？比如N个的<li>元素，如果用回调函数的方法，那是不是太麻烦了~~
2.想请教http://www.momkai.com 这个网站的每个列表元素是如何挨个淡入的？嫩不能用jquery实现类似效果？

谢谢~~~

作者: catfish 发布时间: 2010-02-04

jQuery是这一切很简单，建议多看看api手册哦
用delay吧，写了个例子不知道符合你的要求不

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js" ></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('div').each(function(i,n){
$(this).delay(i*500).fadeIn(500);
});
});
//]]>
</script>
</head>
<body>
<div style="width:30px;height:30px;margin-top:10px;background:red;display:none"></div>
<div style="width:30px;height:30px;margin-top:10px;background:red;display:none"></div>
<div style="width:30px;height:30px;margin-top:10px;background:red;display:none"></div>
<div style="width:30px;height:30px;margin-top:10px;background:red;display:none"></div>
<div style="width:30px;height:30px;margin-top:10px;background:red;display:none"></div>
<div style="width:30px;height:30px;margin-top:10px;background:red;display:none"></div>
<div style="width:30px;height:30px;margin-top:10px;background:red;display:none"></div>
<div style="width:30px;height:30px;margin-top:10px;background:red;display:none"></div>
</body>
</html>