관리 메뉴

드럼치는 프로그래머

[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' 문자열을 지원하는데, 각각은 200600 밀리세컨드를 의미합니다.

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

<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


Comments