slide

 

* slide

- slideUp : 해당 부분이 아래에서 위로 hide 됨

- slideDown : 해당 부분이 위에서 아래로 show 됨

- slideToggle : Up, Down 모두 가능

※ :: hide-show 에 시간을 설정하면 동일한 효과가 나타는 듯 하다.

※ :: 좌, 우 슬라이드는 animate() 에서 다룬다.

$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback);

 

$(document).ready(function(){
  $("#divbtn").click(function(){
    $("#divpanel").slideToggle("slow");
  });
});

<div id="divbtn"  style="background-color:pink; width:100px;";>눌러보세요</div>
<div id="divpanel" style="background-color:skyblue; display:none; width:100px; height:300px";>촤르르륵</div>