动画效果的bug。

Question

var content = document.getElementById('box_content');
        var info = document.getElementById("info_one");
        var info2 = document.getElementById("info_two");    

        var myScroll;
        var speed = 50;
        var liHeight = 160;
        var staytime = 1000;
        info2.innerHTML = info.innerHTML;
        function scrollUp(){

            if(content.scrollTop % liHeight ==0) {
                 clearInterval(myScroll);
                 setTimeout("startMove()",staytime);
            }else{
                content.scrollTop++;
                if(content.scrollTop>=info.scrollHeight){
                    content.scrollTop=0;
                }
            }
            
        }

        function startMove(){
            content.scrollTop++;
            myScroll = setInterval("scrollUp()",speed);        
        }
        
        setTimeout("startMove()",1000);

        content.onmouseover = function(){
             clearInterval(myScroll);
            }
        content.onmouseout = function(){
            myScroll = setInterval("scrollUp()",speed);
            }

效果是当信息滚动，当到达一定高度后（就是每个信息位置）都会停一下然后继续滚动。鼠标移入后停止动画 移除开始动画。可是当到达一定高度后（就是每个信息位置）这个时候移入鼠标 之后会出现bug 疯狂滚动！！！！

Answer 1

不要使用mouseover与mouseout，他们在移动时也会触发，mouseout的多次响应造成创建了多个定时器改用onmouseenter与onmouseleave事件