晒单效果
有多个li标签，每个li都有一定的高度和宽度，每次只能显示两个li标签的高度，每次将最后一个li高度变为0，插入到第一个，再动画变为原来的高度
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>晒单</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
#xianshi{
width:200px;
height:80px;
margin:0 auto;
border:1px solid black;
overflow: hidden;
}
#xianshi ul li{
width:200px;
height:40px;
font-size:30px;
font-weight: 700;
list-style:none;
}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){
$('#xianshi ul li').last().css('height','0');//将最后一个div高度变为0
$('#xianshi ul').prepend($('#xianshi ul li').last());
$('#xianshi ul li').first().animate({'height':'40'},500);
},2000);
})
</script>
</head>
<body>
<div id="xianshi">
<ul>
<li style="background:red;">1</li>
<li style="background:green;">2</li>
<li style="background:orange;">3</li>
<li style="background:yellow;">4</li>
<li style="background:grey;">5</li>
<li style="background:blue;">6</li>
</ul>
</div>
</body>
</html>
