鼠标移入启动定时器，移出清除定时器

Question

想做一个鼠标移入显示光标，自动移动（启动一个定时器），移出时，动画停止（清除定时器）。

function move(dom) {
                var _this = $(dom);
               _this. find('.panel').animate({
                    left: "300px",
                    width: '252px'
                }, 2000,'linear')
                    .animate({
                        left: '600px',
                        width: '20px'
                    }, 2000,'linear',function(){
                    $(this).css({
                        left:'-10px',
                        width:'20px'
                    })
                    });
            }


            var timer = null;

            $('.box').mouseenter(function(){
                var _this = $(this);
                $(this).find('.panel').show();
                move(_this);
                timer = setInterval(function(){
                    move(_this);
                },50);

            });

            $('.box').mouseleave(function(){
                clearInterval(timer);
                $(this).find('.panel').hide();
            })

但是鼠标移出时，并没有清除定时器...............

Answer 1

其实你的定时器已经清除了的，不过你之前每 50 毫秒就排入一个耗费 4 秒的动画，即使停止了定时器，自己排入的动画队列，含着泪也要放完。

例子如下,你鼠标往上放个一秒，然后移开，就会发现不断在动，等等看，一会就会停下来，其实定时器早就停了，不过安排好了的动画都要放完。
https://jsfiddle.net/o2gxgz9r...

Answer 2

你用了jquery? 那里面有个 stop（）的东西，可以停止之前的动画