移入移出動畫效果的實現主要用到了定時器。定時器即 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); }

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

總結

以上是生活随笔為你收集整理的JS动画-移入移出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。