밑에 소스코드에서  animate효과에서 ui적용이 안되는데 방법 있을까요?

<div class="gnb_wrap">
   <div class="menu">
    <a href="#">대메뉴1</a>
    <a href="#">대메뉴2</a>
    <a href="#">대메뉴3</a>
    <a href="#">대메뉴4</a>
    <a href="#">대메뉴5</a>
   </div>
   <div class="snb">
   <div class="snb_wrap">
    <div>
    <a href="#">서브1-1</a>
    <a href="#">서브1-2</a>
    <a href="#">서브1-3</a>
    <a href="#">서브1-4</a>
    </div>
    
    <div>
    <a href="#">서브2-1</a>
    <a href="#">서브2-2</a>
    <a href="#">서브2-3</a>
    <a href="#">서브2-4</a>
    </div>

    <div>
    <a href="#">서브3-1</a>
    <a href="#">서브3-2</a>
    <a href="#">서브3-3</a>
    <a href="#">서브3-4</a>
    </div>
    
    <div>
    <a href="#">서브4-1</a>
    <a href="#">서브4-2</a>
    <a href="#">서브4-3</a>
    <a href="#">서브4-4</a>
    </div>
    
    <div>
    <a href="#">서브5-1</a>
    <a href="#">서브5-2</a>
    <a href="#">서브5-3</a>
    <a href="#">서브5-4</a>
    </div>
   </div><!-- snb_wrap end -->
   
   <script>

    var $=jQuery;
    //이문서가 준비되면, | 실행문:.snb 슬라이드 업하자!
    $(document).ready(
     function(){
      $('.snb').stop().slideUp(1000,'easeOutElastic'); /// <<<<<<<<<<<-----이부분
     }
    );
    //.menu 마우스가 오버 되면,| 실행문:.snb 슬라이드 다운 하자!
    $('.menu').mouseover(
     function(){
      $('.snb').stop().slideDown(300,'easeOutElastic');  /// <<<<<<<<<<<-----이부분
     }
    );

    /*$('.snb').click(//.snb를 클릭했을때
     function(){
      $('.snb').slideUp(1000);//snb메뉴가 슬라이드 업된다
     }
    );*/

    $('.snb').mouseleave(//.snb를 클릭했을때
     function(){
      $('.snb').stop().slideUp(1000,'easeOutElastic');//snb메뉴가 슬라이드 업된다
     }
    );
    

   </script>

   </div> <!-- snb end -->
  </div> <!-- gnb_wrap end -->