JS実現「共有先」サイドバー

マウスを移動して共有すると、サイドバーが徐々に現れ、削除すると徐々に消えていくのが原理です.
効果は図のようになります.
HTMLコード:

<div id="div1">
    <p><a href="">QQ  </a></p>
    <p><a href="">    </a></p>
    <p><a href="">......</a></p>
    <span id="sp">   </span>
</div>

CSSコード:

*{margin:0;padding:0;}
        div{left:-150px;top:100px;width:150px;height:200px;background: #00ffff;position: relative;}
        div span{width:20px;height: 70px;position: absolute;right:-20px;top:70px;background: #00ff00;cursor: pointer;}

JSコード:

window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oSpan = document.getElementById('sp');
            var TimerId=0;
            oDiv.onmousemove = oSpan.onmouseover = function () {
                startMove(0);
            };
            oDiv.onmouseout = oSpan.onmouseout = function () {
                startMove(-150);
            };
            //iTag           
            function startMove(iTag) {
                var speed = (iTag -oDiv.offsetLeft)>0?10:-10;
                clearInterval(TimerId);
                TimerId = setInterval(function () {
                    if(oDiv.offsetLeft==iTag)   //          
                        clearInterval(TimerId);
                    else
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                },30);
            }
        };

この小例の核心はstartMove(iTag)関数であり、これはdivを目標位置に移動させるためのものである.