移入移出動畫效果的實現主要用到了定時器。定時器即 setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。它會不停地呼叫函式，直到clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。

HTML

<div id="div">
    <span>share</span>
</div>

CSS

div{width: 250px;height: 30px;background-color: blue;position: absolute;left: -200px;top: 50px;}
span{float: right;color: #fff;}
 

JS，移出效果就是改變該元素絕對定位的 left 的值，判斷到了0位置時候結束，清除定時器。移入效果則完全相反。

var oDiv=document.getElementById("div");
oDiv.onmouseover=function(){
    startMove();
};
oDiv.onmouseout=function(){
    startMoveOut();
}
var timer=null;
function startMove(){
    clearInterval(timer);
    var oDiv=document.getElementById("div");
    timer=setInterval(function(){
        if(oDiv.offsetLeft == 0){
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft+5+"px";
        }
    },30);
}
function startMoveOut(){
    clearInterval(timer);
    var oDiv=document.getElementById("div");
    timer=setInterval(function(){
        if(oDiv.offsetLeft == -200){
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft-5+"px";
        }
    },30);
}
 

上述程式碼顯然是可以優化的，實現同樣功能的函式，可以通過傳參來壓縮成一個函式。觀察兩個函式，它們的差別就在於判斷的目標位置不同，移動時改變的距離不同。

var oDiv=document.getElementById("div");
oDiv.onmouseover=function(){
    startMove(5,0);
};
oDiv.onmouseout=function(){
    startMove(-5,-200);
}
var timer=null;
function startMove(speed,iTarget){
    clearInterval(timer);
    var oDiv=document.getElementById("div");
    timer=setInterval(function(){
        if(oDiv.offsetLeft == iTarget){
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
        }
        
    },30);
}
 

為了提升效能，傳參的數量越少越好。比較引數speed和iTarget，其中更重要關鍵的引數應該是iTarget，可聯想日常生活中買火車票必須確定自己的目的地，但是速度無所謂的，因為有綠皮火車，動車，高鐵...

var oDiv=document.getElementById("div");
oDiv.onmouseover=function(){
    startMove(0);
};
oDiv.onmouseout=function(){
    startMove(-200);
}
var timer=null;
function startMove(iTarget){
    clearInterval(timer);
    var oDiv=document.getElementById("div");
    timer=setInterval(function(){
        var speed=0;
        if(oDiv.offsetLeft>iTarget){
            speed=-5;
        }else{
            speed=5;
        }
        if(oDiv.offsetLeft == iTarget){
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
        }  
    },30);
}

移入移出的動畫效果實現不是最關鍵的，主要的是學會對程式碼的優化是要一步一步的，最大可能精簡程式的效能。