<style type="text/css">

*{

margin:0;

padding:0;

}

div{

width:200px;

height:200px;

background:red;

filter:alpha(opacity:30);

opacity:0.3;

float:left;

margin:10px;

}

</style>

<script type="text/JavaScript">

window.onload=function(){

var oDiv=document.getElementsByTagName("did");

for(var i=0;i<oDiv.length;i++){

oDiv[i].timer=null;

oDiv[i].alpha=30;

oDiv[i].onmouseover=function(){

startMove(this,100);

}

oDiv[i].onmouseout=function(){

startMove(this,30);

}

}

}

function startMove(obj,oTargin){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var speed=0;

if(obj.alpha>oTargin){

speed=-10;

}

else{

speed=10;

}

if(obj.alpha==oTargin){

 clearInterval(obj.timer);

}

else{

alpha=alpha+speed;

obj.style.filter='alpha(opactiy:'+alpha+')';

obj.style.opacity=alpha/100;

 }

  },30)

}

</script>