<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
      }

      #s {
        top: 0;
        left: 110px;
      }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var divS = document.querySelectorAll('div');
        divS[0].onmouseover = function() {
          bufferMove(this, 'height', 500)
        }
        divS[1].onmouseover = function() {
          bufferMove(this, 'height', 500)
        }
        divS[0].onmouseout = function() {
          bufferMove(this, 'height', 100)
        }
        divS[1].onmouseout = function() {
          bufferMove(this, 'height', 100)
        }


        function bufferMove(ele, attr, target) {
          //起到
          if (attr == 'opacity') {
            var cur = getStyle(ele, attr) * 100;
          } else {
            var cur = parseInt(getStyle(ele, attr));
          }
          //清除定时器
          clearInterval(ele.timer);
          ele.timer = setInterval(function() {
            //步长
            var step = (target - cur) / 10;
            // 如果步长大于0 要向上取整， 步长小于0 要向下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            cur += step;
            //判断终点
            if (step > 0 && cur >= target) {
              clearInterval(ele.timer);
              cur = target;
            } else if (step < 0 && cur <= target) {
              clearInterval(ele.timer);
              cur = target;
            }
            //设置
            if (attr == 'opacity') {
              ele.style[attr] = cur / 100;
            } else {
              ele.style[attr] = cur + 'px';
            }

          }, 20)
        }

        function getStyle(ele, attr) {
          if (ele.currentStyle == undefined) {
            return getComputedStyle(ele)[attr];
          } else {
            return ele.currentStyle[attr];
          }
        }
      }
    </script>
  </head>
  <body>
    <div id="f"></div>
    <div id="s"></div>
  </body>
</html>

js之多物体同时运动动画效果_取整