Notice
Recent Posts
Recent Comments
Archives
Today
Total
«   2024/11   »
일 월 화 수 목 금 토
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
Link
Tags more
관리 메뉴

드럼치는 프로그래머

[jQuery] slideToggle(), 슬라이드 토글하기 본문

★─Programing/☆─WebProgram

[jQuery] slideToggle(), 슬라이드 토글하기

드럼치는한동이 2016. 7. 25. 01:57

slideToggle


원문 링크 http://api.jquery.com/slideToggle/


.slideToggle( [duration] [, callback] )                                                                                                  Returns : jQuery


개요 : 슬라이드를 통해 요소를 보이게 안보이게 처리합니다.

  • .slideToggle( duration [, callback] )
  • duration 시간 값
  • callback 콜백 함수
  • .slideToggle( [duration] [, easing] [, callback] )
  • duration 시간 값
  • easing 특수한 효과 함수
  • callback 콜백 함수

.slideToggle() 함수는 요소의 height 값을 조작해서 움직임을 만들어 냅니다. 보이면 안보이게 안보이면 보이게 처리해 줍니다. 토글이니 당연하겠죠?

보이게 처리할 때 display 속성값을 jQuery 의 데이터 캐쉬에 저장 해두었다가 나중에 display 를 초기값으로 복원해줍니다. 만일 요소의 display 스타일 속성값이 inline 이었다면, display 속성값이 inline 으로 복원된다는 의미입니다.

시간값(Duration)의 기본값은 밀리세컨드이고, 값이 크면 느린 효과가 나타납니다. 물론 반대는 빨라지겠죠. 'fast' 와 'slow' 문자열을 지원하는데, 각각은 200 과 600 밀리세컨드를 의미합니다.

이미지를 예로 보겠습니다.

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // Animation complete.
  });
});

클릭하면 사라졌다가

다시 클릭하면 나타납니다.


시작과 끝 효과 ( Easing )


.animate() 인자 중에 남은 하나는 속도 늦추는 함수(easing function)에 대한 내용입니다. 이 easing 함수는 속도에 대한 내용입니다. 움직임이 한쪽 끝에 닿았을때 처리되는 행동패턴에 대한 내용입니다. jQuery에서 easing 은 기본으로 swing 을 사용합니다. swing은 끝점에 가서 속도가 살짝 느려집니다. 또 하나는 속도를 그대로 유지하는 linear 입니다. easing 함수들을 정상적으로 사용하려면 plug-ins 들이 필요합니다. 대부분 jQuery UI suite 쪽에 정의되어 있습니다.


콜백 함수 ( Callback Function )


애니메이션이 완료된 후 사용될 콜백함수입니다. 이 콜백함수는 인자를 전달할 수 없지만, this 를 이용하여 애니메이션이 일어난 요소 자체를 전달할 수는 있습니다. 만일 여러개의 요소에 움직임 효과를 주었다면 각각의 애니메이션 효과가 일어난 뒤에 개별적으로 콜백함수가 실행이 됩니다.


jQuery 1.6 버전부터는, deferred.done() 와 함께 .promise() 함수를 사용하여 모든 움직임이 끝난 후 한번만 콜백함수를 실행할 수 있게 되었습니다. ( .promise() 함수 예제 링크 ).


.slideToggle() 을 포함하여 모든 jQuery effect 들은, 글로벌 세팅인 jQuery.fx.off = true로 조절할 수 있습니다. 더 많은 정보를 원하시면 jQuery.fx.off를 참고하십시오. 


<!DOCTYPE html>
<html>
<head>
  <style>
  p { width:400px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>

  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>

</body>
</html>

미리보기

오르락 내리락 합니다. 아주 멋지지 않습니까? ^^

 

div 와 구분자들을 슬라이드 업다운합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#b977d1; margin:3px; width:60px; 
        height:60px; float:left; }
  div.still { background:#345; width:5px; }
  div.hider { display:none; }
  span { color:red; }
  p { clear: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
<script>
  $("#aa").click(function () {
    $("div:not(.still)").slideToggle("slow", function () {
      var n = parseInt($("span").text(), 10);
      $("span").text(n + 1);
    });
  });

</script>

</body>
</html>

미리보기

이런 예제는 왜 만들었을까요? 흠...

 

슬라이드를 토글하는 이 녀석이 슬라이드 함수 중에 갑이 되겠네요. 조만간 사용해야 겠습니다.

그럼 즐프하세요.


※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.


[출처] http://findfun.tistory.com/360


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

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

[jQuery] window.onload를 대체하는 jquery의 ready 함수  (0) 2016.07.25
[JSP] include 액션 태그 <jsp:include>  (0) 2016.07.25
[JavaScript] 현재 페이지 refresh 하는 3가지 방법~  (0) 2016.07.25
[HTML] div 영역 숨기기 할때..visibility 와 display 의 차이  (0) 2016.07.25
[JavaScript] select box에서 선택한 값 가져오기  (0) 2016.07.25
'★─Programing/☆─WebProgram' Related Articles more
Comments