是否可以在悬停功能上实时进行？

Question

我有一个div #conteudo和两个链接#linkPrev和#linkNext。

将鼠标悬停在某个链接上时，.animate()向左或向右移动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);
                }
            });

如果用户点击.boxes，则会添加一个类.ativo和.animate({width:X},600)点击的div。

问题是，当我悬停任何链接时，如果.boxes有一个类'.ativo'，它应该关闭方框width:0并且我放回一个回调函数来继续{{1向左或向右。但它只关闭了盒子。我必须做一个mouseleave并将其悬停，然后向右或向左继续.animate()。

有人可以帮助我吗？

PS：我刚刚提到函数.animate，#linkNext函数正在运行。只是为了防止大文本。