<script type="text/javascript">
   window.onload=function() {
       var Li1 = document.getElementById('li1');
       var Li2 = document.getElementById('li2');
       Li1.onmouseover = function () {
           startMove(this, 'opacity', 100);
       }
       Li1.onmouseout = function () {
           startMove(this, 'opacity', 30);
       }
      Li2.onmouseover = function () {
           startMove(this, 'width', 400);
       }
       Li2.onmouseout = function () {
           startMove(this, 'width', 200);
       }
   }
       function getStyle(obj, attr) {
           if (obj.currentStyle) {
               return obj.currentStyle[attr];
           }
           else {
               return getComputedStyle(obj, false)[attr];
           }
       }

  // var timer=null;
  var alpha=30;
 function startMove(obj,attr,target){
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         var icu=0;
         if (attr='opacity'){
             icu=Math.random(parseFloat(getStyle(obj,attr))*100);
         }else{
             icu=parseInt(getStyle(obj,attr));
         }
         var speed=(target-icu)/8;
         speed=speed>0?Math.ceil(speed):Math.floor(speed);
         if (attr==target){
             clearInterval(obj.timer);
         }
         else{
             if(attr='opacity') {
                 obj.style.filter = 'alpha(opacity:' + (icu + speed) + ')';
                 obj.style.opacity = (icu + speed) / 100;
             }else{
                 obj.style[attr]=icu+speed+'px';
             }
         }
     },30)


 }

</script>