各位帮帮忙 onmouseover的问题

 body{

		    margin:0;

		  }

		   #div1{

		     border:1px solid red;width:300px;height:300px;

		   }

<div style="margin-left:-270px;"onmouseover="over1()"onmouseout="out()"id="div1">

		   gfdgfdfgfdhgfhgfjhgjhgjgh

		 </div>

 var i;var j; 

	         function over2(){

				  //clearInterval(j);

			   var div2=document.getElementById("div1");

			   var m=div2.style.marginLeft;

			   m=parseInt(m);

			   if(m<0){

				m=m+1;

				  div2.style.marginLeft=m+"px";

			   }else{

			     clearInterval(i);

			   }

			 }	  

			 function over1(){ 

			   i=setInterval("over2()",10);

			 }

			 function tt(){

				// clearInterval(i);

			   var div1=document.getElementById("div1");

			   var m=div1.style.marginLeft;

			   m=parseInt(m);

			   if(m>-270){

			      m=m-1;

				  div1.style.marginLeft=m+"px";

			   }else{

			     clearInterval(j);

			   }

			 }	  

			 function out(){

			   j=setInterval("tt()",10);

			 }

我想当鼠标放上去的时候，矩形会出来，移开时收索回去。并不是只在完全出来后才收缩，只要鼠标移开就行。而且只要鼠标放上去就慢慢移出来，上面的代码有问题，加上那两行注释的也不行。各位帮帮忙，本人刚开始学
------解决方案--------------------
function over2(){
                 
               var div2=document.getElementById("div1");
               var m=div2.style.marginLeft;
               m=parseInt(m);
               if(m<0){
                m=m+1;
                  div2.style.marginLeft=m+"px";
               }else{
                 clearInterval(i);
               }
             }      
             function over1(){