思路：将某元素移动到指定位置======需传入2个参数。一个是要移动的元素element，另一个是指定的位置target。
获取元素的当前位置current，设置一个每次移动的距离step，设置定时器，通过多次循环移动，到达目标位置。根据当前位置和目标位置的距离判断是否需要执行循环
以本文为例，这里有几个坑：
1、元素要移动，需要脱离文档流，即css样式中需要使用绝对定位
2、每触发一次点击，就产生一个定时器，当不停地点击按钮时，元素移动的速度不断加快
===》解决：只设置一个定时器，且在执行定时器之前先清理一次定时器，防止上次的操作留下影响。
只设置一个定时器可以根据对象的属性，对象点出来的属性有且只有一个。即element.timer1=setInterval();
3、获取元素的当前位置，需要用offsetLeft / offsetTop / offsetWidth / offsetHeight,得出的结果是number类型，没有px
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div{ 8 width: 200px; 9 height: 130px; 10 background: red; 11 position: absolute; 12 left: 20px; 13 } 14 </style> 15 </head> 16 17 <body> 18 <input type="button" value="按钮1" id="btn"/> 19 <input type="button" value="按钮2" id="btn2"/> 20 <div id="dv"> 21 22 </div> 23 <script> 24 document.getElementById("btn").onclick=function(){ 25 animate(document.getElementById("dv"),400); 26 27 }; 28 document.getElementById("btn2").onclick=function(){ 29 animate(document.getElementById("dv"),1600); 30 }; 31 //把任意元素移动到指定的目标位置 32 function animate(element,target){ 33 clearInterval(element.timer1); 34 element.timer1=setInterval(function(){//element是一个对象，对象点出来的属性有且只有一个，避免多次点击按钮产生多个定时器 35 var current=element.offsetLeft; //获取当前位置，数字类型，没有px。 36 //不可以用element.style.left，因为该写法只能获取到行内样式，不能获取到<style></style>标签内的样式 37 var step=10;//每次移动的距离 38 step=current<target?step:-step;//step的正负表示了向左或是向右移动 39 current+=step; //计算移动到的位置，数字类型，没有px 40 if(Math.abs(target-current)>Math.abs(step)){//当离目标位置的距离大于一步移动的距离 41 element.style.left=current+"px";//移动 42 43 }else{//当间距小于一步的距离，则清理定时器，把元素直接拿到目标位置 44 clearInterval(element.timer1); 45 element.style.left=target+"px"; 46 47 } 48 },20); 49 } 50 </script> 51 </body> 52 </html>