1 　　var box = document.querySelector('.box'); // 获取box盒子
 2 　　box.addEventListener("mouseover", function() {
 3 　　    animate(400);  // 当鼠标经过盒子时，让盒子运动到400的位置
 4 　　});
 5 　　var timer = null;  // 声明一个变量来存储定时器
 6 　　function animate(target) {  // target 目标位置
 7     　　clearInterval(timer);  // 开启定时器前要先关闭上一个定时器，不然定时器会累加导致速度越来越快
 8     　　timer = setInterval(function() {
 9         　　var speed = 10;  // 速度 固定值10
10         　　speed = box.offsetLeft < target ? speed : - speed;  // 判断是向左走（负）还是向右走（正）
11         　　if(box.offsetLeft == target) {
12             　　clearInterval(timer);  // 盒子到达目标值时清除定时器
13         　　} else {
14             　　box.style.left = box.offsetLeft + speed + 'px';
15         　　}
16     　　},25)
17 　　}

二者之差除以十并不总是整数，可能会导致物体位置和目标值不能完全相等，所以需要对speed进行取整，大于0向上取整，小于0向下取整；

 1     var box = document.querySelector('.box');
 2     box.addEventListener("mouseover", function() {
 3         animate(400);
 4     });
 5     var timer = null;
 6     function animate(target) {
 7         clearInterval(timer);
 8         timer = setInterval(function() {
 9             var speed = (target - box.offsetLeft) / 10; // 速度为目标值和当前位置之差/10
10             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 判断speed的正负，大于0向上取整，小于0向下取整
11             if(box.offsetLeft == target) {
12                 clearInterval(timer);
13             } else {
14                 box.style.left = box.offsetLeft + speed + 'px';
15             }
16         }, 25)
17     }

 1     var lis = document.querySelectorAll('li');
 2     for(var i = 0; i < lis.length; i++) {   // 循环遍历li
 3         lis[i].timer = null;   // 给每个li声明一个timer来存储定时器
 4         lis[i].addEventListener("mouseover", function() {
 5             animate(this, 400);
 6         });
 7     }
 8     function animate(obj, target) {
 9         clearInterval(obj.timer);
10         obj.timer = setInterval(function() {
11             var speed = (target - obj.offsetLeft) / 10;
12             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
13             if(obj.offsetLeft == target) {
14                 clearInterval(obj.timer);
15             } else {
16                 obj.style.left = obj.offsetLeft + speed + 'px';
17             }
18         }, 25)
19     }

 1 <style>
 2     .box {
 3         width: 200px;
 4         height: 200px;
 5         background-color: #f00;
 6         opacity: 0.3;
 7         filter: alpha(opacity = 30); /* 兼容IE8及以下的IE浏览器 */
 8     }
 9 </style>
10 <script>
11     window.addEventListener('load', function() {
12         var box = document.querySelector('.box');
13         box.addEventListener('mouseover', function() {
14             animateAlpha(100);  // 鼠标经过盒子 透明度变为1
15         })
16         box.addEventListener('mouseout', function() {
17             animateAlpha(30);  // 鼠标离开透明度变为0.3
18         })
19         var alpha = 30;  // 存储当前透明度 初始值为30
20         var timer = null;
21         function animateAlpha(target) {
22             clearInterval(timer);
23             timer = setInterval(function() {
24                 var speed = 10;
25                 speed = alpha < target ? speed : - speed; // 判断速度的正负
26                 if(alpha == target) {
27                     clearInterval(timer);
28                 } else {
29                     alpha += speed;
30                     /* 这里有两个样式都需要改变 */
31                     box.style.filter = 'alpha(opacity = '+ alpha +')';
32                     box.style.opacity = alpha / 100; // opacity别忘了除以100
33                 }
34             }, 25);
35         }
36     })
37 </script>