.hover 네비 학습 중인데요.

<script>
 
        $(document).ready(function (){
 
       
 
        //hover 메소드는
 
        //마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다.
 
        $('.navi').hover(function(){
 
        $('.navi2').animate({
 
        left: 500
 
        }, 'slow');
 
        }, function(){
 
        $('.navi2').animate({
 
        left: 0}, 'slow');
 
        });//hover메소드 끝
 

        });//ready메소드 끝
 
       
 
    </script>

navi 영역에 마우스오버시 navi2 영역이 늘어나고,

마우스아웃 시 줄어들게 까지는 만들었는데요.

늘어난 navi2 영역에 마우스 올렸을때도 기존에 늘어나 있던 사이즈가
줄어들지 않았으면 좋겠는데 navi에 적용한 .hover 에서 제어하는 방법을 모르겠어요.ㅠ

어떻게 처리 하면 되나요??