一个动画，鼠标移进移出就分别运动，怎么移进去，盒子进出同时了，，

刚学js，做了个动画，有点问题，有大神帮忙看下？ <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>absolute</title>
   <!--  styles of the box styles of the boxstyles of the box -->
          <style>
            *{
              margin: 0;
              padding: 0;
            }
            body{
              height: 2000px;
            }
            /*//big box */
            #container{
              width: 200px;
              height: 400px;
              background: #ccc;
              position: relative;
              top: 200px;
              left:-200px;
        
            }
          /* small box small boxsmall boxsmall box*/
            #tip{
              width: 60px;
              height: 400px;
              background: #f00;
              text-align: center;
              line-height: 400px;
              position: absolute;
              left: 200px;
              top: 0;
            }
          </style>
        </head>
        <body>
    <!-- html box html box html box html box  -->
          <div id="container">
            <div id="tip">contact</div>
          </div>
          <script>
            var ocontainer=document.getElementById("container");
           //mouseover programme mouseover programmemouseover programme
            ocontainer.onmouseover=function(){
              //make a new object
               var status={object:ocontainer,attr:{left:0}};
                animation(status);
              }
            //mouseout programme mouseout programmemouseout programme
            ocontainer.onmouseout=function(){
              //make a new object
             var status1={object:ocontainer,attr:{left:-200}};
              //delay function after mouse moveout
                  setTimeout(()=>{
                  console.log("here")
                    timeoutP(status1)
                },2000)
         //function of the timeout 
              function timeoutP(status1){
                  animation(status1);
                } 
                };
         //animation function animation function animation function 
          function animation(status){
              var object=status.object;
              // console.log(object)
              // console.log(status.attr)
                clearInterval(object.timer)
              // console.log(attrValueNow);
               object.timer=setInterval(() => {
                  console.log(object.timer)
                  timerProgram(object,status)
                  }, 50);
        //change every attribute change every attribute change every 
        
         function timerProgram(object,status){
                // console.log(object,i)
                var flag=true;
                for (var i in status.attr) {
                   var attrValueNow=status.attr[i];
                var attrValueBefore=parseInt(getStyleValue(object,i));
              // console.log(attrValueBefore)
              var step;
              if (attrValueNow-attrValueBefore<0) {
                  step=Math.floor((attrValueNow-attrValueBefore)/10)
              }else{
                  step=Math.ceil((attrValueNow-attrValueBefore)/10);
              }
                var absoluteStep=step<0?-step:step;
                // console.log(step,attrValueBefore)
                var temp=attrValueBefore+step;
                // console.log(temp);
               // some special attributes
                if (i=="offsetLeft"||i=="offsetTop") {
                    object[i]=temp+"px";
                    // console.log(object[i])
                }else{
                  object.style[i]=temp+"px";
                }
                  var tt=attrValueNow-temp;
               //the last step
                  if (Math.abs(tt)<=absoluteStep) {
                    object.style[i]=attrValueNow+"px";
                    
                  }else{
                    flag=false;
                  }
                }
              //off the loop
                if (flag) {
                  clearInterval(object.timer)
                }
        
              }
            //get box styles
             function getStyleValue(obj,attr){
              // console.log(obj)
              if (attr=="offsetLeft"||attr=="offsetTop") {
                // console.log(obj[attr])
                    return obj[attr];
              }else{
                 if(obj.currentStyle){
                return obj.currentStyle[attr];
                  }else{
                      return getComputedStyle(obj,null)[attr]
                  }
              }
        
        }
             
          }
          </script>
        </body>
        </html>
        

解决方案 »

  1.   


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>absolute</title>
        <!--  styles of the box styles of the boxstyles of the box -->
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                height: 2000px;
            }
            /*//big box */
            #container {
                width: 200px;
                height: 400px;
                background: #ccc;
                position: relative;
                top: 200px;
                left: -200px;
                transition: left 0.3s ease-in-out;        }
            /* small box small boxsmall boxsmall box*/
            #tip {
                width: 60px;
                height: 400px;
                background: #f00;
                text-align: center;
                line-height: 400px;
                position: absolute;
                left: 200px;
                top: 0;
            }
        </style>
    </head>
    <body>
        <!-- html box html box html box html box  -->
        <div id="container">
            <div id="tip">contact</div>
        </div>
        <script>
            var ocontainer = document.getElementById("container");
            //mouseover programme mouseover programmemouseover programme
            ocontainer.onmouseover = function () {
                this.style.left = 0
            }
            //mouseout programme mouseout programmemouseout programme
            ocontainer.onmouseout = function () {
                this.style.left = "-200px"
            };
        </script>
    </body>
    </html>
      

  2.   

    你这个太简单了，我里面包含了个缓动动画，我在那个status里打算放其他属性也可以。但就是有问题，不知道问题出在哪了？？？
      

  3.   

    额，快动吧，，，
    问题找到了，mouseover 换成mouseenter就好了，这两有点区别，，，，