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

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

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();

})

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