<div?class="hide"?id="hide"><div?class="hover"?id="hover"></div></div>
<style>
??*?{margin:?0;?padding:?0;?}
??.hide?{height:?500px;?width:?500px;?background-color:?red;?position:?absolute;?left:?-500px;?}
??.hover?{height:?50px;?width:?50px;?background-color:?blue;?position:?relative;?top:?225px;?left:?500px;?}
</style>

<script>
??var?hide=document.getElementById('hide');
??var?hover=document.getElementById('hover');
??var?timer=null;
??var?startMove=function()?{
????clearInterval(timer);
????timer=setInterval(function(){
??????????????if(hide.offsetLeft<0){
????????????????hide.style.left=hide.offsetLeft+10+'px'
??????????????}else{
????????????????clearInterval(timer)
??????????????}},30
????)
??};

??var?endMove=function()?{
????timer=setInterval(function(){
??????????????if(hide.offsetLeft>-500){
????????????????hide.style.left=hide.offsetLeft-10+'px'
??????????????}else{
????????????????clearInterval(timer)
??????????????}},30
????)
??};

??hover.onmouseover=function()?{
????startMove();
??};

??hover.onmouseout=function()?{
????endMove();
??};

</script>