[jQuery] 효과, 슬라이딩 (slideUp, slideDown, slideToggle)

• slideUp([speed], [callback]) / version : 1.0
   - 높이를 지정한 시간동안 0으로 감소시키고 style의 display:none 상태를 적용시킨다.
     슬라이딩(UP) 형식으로 표현되면서 사라지게 된다.
  
  $(document).ready(function(){
      $("#test_id").click(function(){
          $("#a").slideUp(500);
      });
  });
  
   - test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소가 0.5초간 슬라이딩(UP) 효과를 나타내며 사라진다.
  
  
• slideDown([speed], [callback]) / version : 1.0
   - 숨겨진 요소의 style의 display:none 상태를 이전의 상태(block 또는 liline)으로 복구되면서 높이를 지정한 시간동안 0에서 원래 높이값으로 증가시킨다.
    슬라이딩(DOWN) 형식으로 표현되면서 나타나게 된다.
  
  $(document).ready(function(){
      $("#test_id").click(function(){
          $("#a").slideDown(500);
      });
  });
  
   - test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소가 0.5초간 슬라이딩(DOWN) 효과를 나타낸다.
  
  
• slideToggle([speed], [callback]) / version : 1.0
   - 슬라이드 효과(slideUp, slideDown) 효과를 반복해서 나타낸다.
  
  $(document).ready(function(){
      $("#test_id").click(function(){
          $("#a").slideToggle(500);
      });
  });
  
   - test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소의 style의 display 값이 none일 경우 slideDown, 아닐 경우(block 또는 liline) slideUp 효과를 나타낸다.

[출처] http://m.blog.naver.com/darkelfand/90077797427