javascript - リアルタイムでホバー機能を実行することは可能ですか?

Question

div#conteudoと 2 つのリンク#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);
                }
            });

ユーザーが をクリックすると、クラスとクリックされた div.boxesが追加されます。.ativo.animate({width:X},600)

問題は、リンクのいずれかに.boxesカーソルを合わせると、クラス '.ativo' がある場合はボックスを閉じる必要がありwidth:0、コールバック関数を配置.animate()して左または右に移動することです。しかし、それは箱を閉じるだけです。.animate右または左に移動し続けるために、マウスを離してホバーする必要があります。

誰かが私を助けることができますか？

PS: 関数について言及しましたが#linkNext、#linkPrev関数は機能しています。大きなテキストを防ぐためだけに。