js tween动画闪动问题

Question

在写JS Tween动画的时候，在还没有执行完一次onmouseover的情况下再次出发会出现图片闪动。怎样解决？

 

CSS:

<style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #div{
                position: absolute;
                left: 0;
                width: 102px;
                height: 5px;
                background: black;
            }
            #ul{
                height: 52px;
                width: 450px;
                list-style: none;            
            }
            #ul li{
                float: left;
                width: 100px;
                border-top: 1px black solid;
                border-bottom: 1px black solid;
                height: 50px;
                line-height: 50px;
                text-align: center;
            }
        </style>

Html:

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<div id="div"></div>

JS:

<script type="text/javascript" src="tween.js"></script>
<script type="text/javascript">
    var div=document.querySelector("#div");
    var ul=document.querySelector("#ul");
    var li=document.querySelectorAll("#ul li");
    var _width=div.offsetWidth;
    console.log(_width);
    for(i=0;i<4;i++){
        li[i].index=i;
        li[i].onmouseover=function(){  
        var start=div.offsetLeft;
            var startStep=0;
        var change=_width*this.index-div.offsetLeft;
        var endStep=100;
        var timer=setInterval(function(){
                startStep++;
        if(startStep>=endStep){
            clearInterval(timer);
        }
                    div.style.left=Tween.Linear(startStep,start,change,endStep)+"px";
        },.1)
        }
    }
</script>                        

Answer 1

var start=div.offsetLeft; 这句放到循环外。 你执行一次后，div的位置改变了。

Answer 2

延迟设置小一点

Answer 3

在哪里设置延迟，我没有设置延迟啊..setInterval的时间已经是0.1毫秒了