速度动画

实现思路：

每次均匀改变left值，达到匀速运动的效果

效果

实现步骤：

对btn元素绑定点击事件

window.onload = function(){
   var container=document.getElementById('container');
   var btn=document.getElementById('btn');
   btn.onclick = function(){
      if(container.offsetLeft==-200){
         moveOut();
      }
      else{
        moveBack();
      }
    };
};

编写moveOut()函数

1. setInterval()函数的简单介绍
   setInterval() 方法会不停地按周期调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
2. container.offsetLeft的使用
   container.offsetLeft可以获取到当前container元素的left值

代码内容

var timer=null;
function moveOut(){
  clearInterval(timer);
  timer=setInterval(function(){
   if(container.offsetLeft == 0){
       clearInterval(timer);
   }
   else{
       container.style.left=container.offsetLeft+10+'px';
   }
   },30);
}