<!DOCTYPE>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.wrapper{
200px;
height:500px;
}
ul li{
list-style:none;
background: #009900;
height:50px;
border:1px solid #fff;
position:relative;
overflow:hidden;
}
p{
color:#fff;
text-align:center;
line-height:50px;
position:relative;
z-index:2;
}
span{
200px;
height:50px;
position:absolute;
top:0px;
left:200px;
background:red;
z-index:1;
}
/*
ul li:hover span{
left:0px;
transition:all 0.3s ease;
}
*/
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li>
<p>案例一</p>
<span></span>
</li>
<li>
<p>案例一</p>
<span></span>
</li>
<li>
<p>案例一</p>
<span></span>
</li>
<li>
<p>案例一</p>
<span></span>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").hover(function(){
$(this).find("span").stop(true,true).css("background",RandomColor()).animate({"left":"0px"},300);//stop(true,true)============清楚其他的li span的影响
},function(){
$(this).find("span").stop(true,true).css("background",RandomColor()).animate({"left":"200px"},300);
});
function RandomColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb("+r+","+g+","+b+")";//随机颜色函数
}
});
</script>
</body>
</html>
