javascript - Is it possible to do a real time on hover function? -

i have div #conteudo , 2 links #linkprev , #linknext.

when hover on link, .animate() left or right div #conteudo.

html:

<div id="conteudo">     <div class="boxes" id="content1">     <div class="boxes" id="content2">     <div class="boxes" id="content3"> </div> <a id="linkprev" class="linksnav"></a> <a id="linknext" class="linksnav"></a> 

css:

#conteudo{width:2000;position:relative; height:1080px;} .box{width:0; overflow:hidden; float:left;} 

js:

$('#linknext').on({                  mouseenter: function(){                     if ($('#conteudo .boxes').hasclass('ativo')) {                         $('#conteudo .boxes').removeclass('ativo');                         $('.boxaberto').animate({width:'0'},600, function(){                             console.log('sad')                         });                     } else {                         this.iid = setinterval(function() {                             if (cont > -565) {                                 cont -= 5;                                 $('#conteudo').attr('style','left:'+cont+'px');                                  console.log(cont)                             }                             if (cont <= -565){                                 $('#linknext').hide();                             }                                }, 0);                     }                 },                 mouseleave: function(){                     this.iid && clearinterval(this.iid);                 }             }); 

if user clicks .boxes, it'll add class .ativo , .animate({width:x},600) clicked div.

the problem is, when hover of links, if .boxes has class '.ativo' should close box width:0 , put callback function continue .animate() left or right. closes box. have mouseleave , hover continues .animate right or left.

can me?

ps: mentioned function #linknext, #linkprev function working. prevent big text.