注意：函数需要传递2个参数，动画对象和移动到的距离。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>测试</title>
    8.     <style>
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         div{
    14.             position: absolute;
    15.             left: 0;
    16.             width: 100px;
    17.             height: 100px;
    18.             background-color: pink;
    19.         }
    20.         span{
    21.             position: absolute;
    22.             top: 100px;
    23.             left: 0;
    24.             display: block;
    25.             width: 100px;
    26.             height: 100px;
    27.             background-color: purple;
    28.         }
    29.     </style>
    30. </head>
    31. <body>
    32.     <div></div>
    33.     <span></span>
    35.     <script>
    36.         //简单动画函数封装  obj目标对象  target目标位置
    37.         function animate (obj,target) {
    38.             //让盒子在当前位置+1距离
    39.             //定时器重复操作，最后清除定时器
    40.             var timer = setInterval(function(){
    41.             //获得盒子当前的位置
    42.             var x = obj.offsetLeft;
    43.             if(x >= target){
    44.                 clearInterval(timer);
    45.             }
    46.             obj.style.left = x + 1 + 'px';
    47.             },30);
    48.         }
    49.         //获取元素
    50.         var div = document.querySelector('div');
    51.         var span = document.querySelector('span');
    52.         animate(div,300);
    53.         animate(span,200);
    54.     </script>
    55. </body>
    56. </html>

    .