我想要的是鼠标离开就有背景渐变效果，
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <style type="text/css">
*{padding:0;margin:0;}
#para li{height:35px;width:150px;border-bottom:1px dashed #ccc;position:relative}
#para li p{background:orange;position:absolute;top:0;left:0;height:35px;width:150px;opacity:0;}
#para li span{position:absolute;top:0;left:0;}
</style>
</head>
<body>
<ul id="para">
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
</ul>
<script type="text/javascript">
var $ = function (id){return document.getElementById(id)};
var para = $("para").getElementsByTagName("li");
var timer =null;
var num;
for(var i=0; i<para.length; i++){
para[i].onmouseover = function(){
var p = this.getElementsByTagName("p")[0];
p.style.opacity = 100;
num = 100;
}
para[i].onmouseout = function(){
var p = this.getElementsByTagName("p")[0];
timer = setInterval(function(){startMove(p)},20)
}
}
function startMove(p){
var iSpeed = 5;
if(num <= iSpeed){
clearInterval(timer)
}else{
num -= iSpeed;
}
p.style.opacity = num /100;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <style type="text/css">
*{padding:0;margin:0;}
#para li{height:35px;width:150px;border-bottom:1px dashed #ccc;position:relative}
#para li p{background:orange;position:absolute;top:0;left:0;height:35px;width:150px;opacity:0;}
#para li span{position:absolute;top:0;left:0;}
</style>
</head>
<body>
<ul id="para">
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
</ul>
<script type="text/javascript">
var $ = function (id){return document.getElementById(id)};
var para = $("para").getElementsByTagName("li");
var timer =null;
var num;
for(var i=0; i<para.length; i++){
para[i].onmouseover = function(){
var p = this.getElementsByTagName("p")[0];
p.style.opacity = 100;
num = 100;
}
para[i].onmouseout = function(){
var p = this.getElementsByTagName("p")[0];
timer = setInterval(function(){startMove(p)},20)
}
}
function startMove(p){
var iSpeed = 5;
if(num <= iSpeed){
clearInterval(timer)
}else{
num -= iSpeed;
}
p.style.opacity = num /100;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
#para li{height:35px;width:150px;border-bottom:1px dashed #ccc;position:relative}
#para li p{background:orange;position:absolute;top:0;left:0;height:35px;width:150px;opacity:0;filter:alpha(opacity=0)}
#para li span{position:absolute;top:0;left:0;}
</style>
</head>
<body>
<ul id="para">
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
<li>
<p></p>
<span>1</span>
</li>
</ul>
<script type="text/javascript">
var $ = function (id){return document.getElementById(id)};
var $$ = function(name, cot){
cot = cot || document;
return cot.getElementsByTagName(name);
}
var aLi = $$('li' , $('para'));
for(var i = 0, len = aLi.length; i < len; i++){
aLi[i].onmouseover = function(){
clearInterval(this.timer);
var p = $$('p', this)[0];
p.style.opacity = 100;
p.style.filter = 'aplha(opacity=100)';
}
aLi[i].onmouseout = function(){
var p = $$('p', this)[0];
var t = 100;
var that = this;
this.timer = setInterval(function(){
if( t -= 5 ){
p.style.opacity = t / 100;
p.style.filter = 'alpha(opacity='+ t +')';
}else{
clearInterval(that.timer);
p.style.opacity = 0;
p.style.filter = 'alpha(opacity=0)';
}
}, 10)
}
}
</script>
</body>
</html>