[Jquery]레이어팝업 슬라이드 효과

Jquery

//whole 메뉴 열고닫기
function whole_menu_box(i){
 var calDiv = jQuery("#whole_menu_box");
 if(i == 1){
  calDiv.show().animate({top:50},1000)
 }else{
  calDiv.animate({top:-400},1000,function(){
   calDiv.hide();
  })
 }
}

 

Html

<div class="select"><a href="#" onClick="whole_menu_box(1);"><img src="/images/del/header_search.gif" alt="임시이미지"/></a></div>

 <!-- 레이어 팝업 whole 메뉴 width:990px; height:382px;-->
 <div id="whole_menu_box" style="position:absolute; left:50%; top:-1200px; margin:0 0 0 -495px; z-index:10; display:none;">

<div class="whole_menu_box">

<div class="box_white_cont">
    <p class="btn_layer_close"><a href="#"onClick="whole_menu_box(0);"><img src="/images/btn/btn_layer_close.gif" alt="닫기"/></a></p>

</div>

</div>

</div>

 

Css

.whole_menu_box {}
.whole_menu_box .box_white_cont {width:920px; height:312px; padding:30px 30px 40px 40px; background:#fff}