Jq的animate函数

<div id="box"></div>
css
#box{
    width: 100px;
    height: 100px;
    background: red;
}

jq

$(document).on('mousemove', function (e) {
   if(e.clientX<parseInt($(window).width()-100)){
        $('#box').animate({"height":"580px"},1000);
   }else{
       $('#box').animate({"height":"0px"},1000);
   }
});
为什么执行了一个animate之后，另一个就失效呢？

---

……刚发现你问了2次，我把另一边的也粘过来吧

你可以用:animated或者自定义的标志量先判断是否在执行animate，保证同时只有一个animate在执行，比如

$(document).on("mousemove", function (e) {
if(!$('#box').is(":animated")){
   if(e.clientY>100){
        $('#box').animate({"height":80},1000);
   }else{
       $('#box').animate({"height":0},1000);
   }
}
});