[jQuery] .slideToggle()로 객체를 말아올리거나 서서히 펼치는 예제

그물터 관리/JavaScript 2012/04/14 10:43 글쓴이 : 팥알

jQuery의 .slideToggle()은 객체를 말아올리거나 펼치는 효과를 낸다. .slideToggle()의 형식은 아래와 같다.

.slideToggle( [움직임 시간(duration)] [, 움직이고 나서 실행할 함수(callback)] )
.slideToggle( [움직임 시간(duration)] [, 늦춤 함수(easing)] [, 움직이고 나서 실행할 함수(callback)] )

움직임 시간은 밀리초(ms) 단위로 넣거나 slow, normal, fast를 쓸 수 있다. 아래는 jQuery로 단추(button)를 딸깍하면 상자(div)가 펼쳐져 있으면 말아올려서 접고, 접혀 있으면 천천히 펼쳐내리는 예제이다.

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  </head>

  <body>
    <button id="click_button">딸깍해 보세요</button>
    <div style="width: 125px; background-color: rgb(90, 200, 220);" id="button_content">말아올리고 말아내리는 글상자</div>
    <script type="text/javascript">
      $('#click_button').click(function() {
        $('#button_content').slideToggle('slow', function() {
          // 객체가 다 펼치지거나 접히고 나면 여기에 든 내용이 실행된다.
        });
      });
    </script>
  </body>
</html>