Notice
Recent Posts
Recent Comments
Archives
Today
Total
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Link
Tags more
관리 메뉴

드럼치는 프로그래머

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

★─Programing/☆─WebProgram

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

드럼치는한동이 2016. 7. 25. 02:17

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>

<미리보기>

말아올리고 말아내리는 글상자



단추로 쓸 객체를 button 태그 대신 span이나 div로 바꾸어도 된다. 접거나 펼치는 시간은 slow가 600밀리초, fast는 200밀리초이다.


[출처] http://pat.im/906

저작자표시 비영리 동일조건

'★─Programing > ☆─WebProgram' 카테고리의 다른 글

[AJAX] ajax 호출시 마우스 커서를 'wait'로 변경하기  (0) 2016.07.25
[Spring] 로그인 여부에 따라 메뉴 숨기고 나타내기 (SECURITY)  (0) 2016.07.25
[HTML] textarea에서 엔터친 데이터를 보여줄때 br이 먹지 않습니다.  (0) 2016.07.25
[jQuery] 효과, 슬라이딩 (slideUp, slideDown, slideToggle)  (0) 2016.07.25
[jQuery] 효과, 페이딩 (fadeOut, fadeIn, fadeTo)  (0) 2016.07.25
'★─Programing/☆─WebProgram' Related Articles more
Comments