toggle
원문 링크 
http://api.jquery.com/toggle/
개요 : 일치하는 요소 표시 또는 숨기기.
- .toggle( [duration] [, callback] )
- duration 시간 값
- callback 콜백 함수
- .toggle( [duration] [, easing] [, callback] )
- duration 시간 값
- easing 토글 시 특수한 효과
- callback 콜백 함수
- .toggle( showOrHide )
- showOrHide 보이거나 숨기기 위한 부울 값
.toggle() 함수는 요소의 보임 속성을 조절하는 아주 간단한 함수입니다.
$('.target').toggle();조건과 일치하는 요소는 효과없이 보이게 되거나 숨겨지게 되는데, CSS 의 display 속성값은 변하지 않습니다. 만일 요소가 보이고 있다면 사라지고, 안보인다면 보이게 됩니다. display 속성은 저장되었다가 필요에 따라 복구됩니다. 만일 요소의 display 값이 inline 였다면, 숨겨지고 보여질 때마다 inline 값이 토글되는 것입니다.
시간값(duration)을 세팅하면, .toggle() 함수는 애니메이션 효과를 가지게 됩니다. .toggle() 함수는 width, height, 그리고 투명도(opacity)가 바뀌는 애니메이션 효과를 지니게 되는 것입니다. 이런 속성값들이 0 에 도달하면, display 스타일 속성은 none 이 되어 페이지 레이아웃에서 완전 제거됩니다.
시간값(Durations) 의 기본 단위는 밀리세컨드(milliseconds) 입니다. 높은 값을 주면 느려지고 반대는 빨라집니다. 'fast' 와 'slow' 문자열을 사용할 수 있으며, 각각은 200 과 600 밀리세컨드를 의미합니다.
jQuery 1.4.3 버전에 와서, easing 함수를 사용할 수 있는 문자열을 사용할 수 있게 되었습니다. Easing 함수란 스피드를 조작하여 특별한 효과를 나타나게 하는 함수를 의미합니다. jQuery 가 기본적으로 가지고 있는 easing 표현은 swing 과 linear 입니다. 더 많은 easing 효과들이 궁금하시면 jQuery UI suite를 방문하세요. 단, easing 함수는 플러그인 이므로 관련된 라이브러리를 포함해야 사용이 가능합니다.
콜백 함수를 인자로 사용하면 애니메이션 효과가 완료되면 해당 콜백함수가 실행됩니다. 연속적으로 다른 애니메이션 효과를 추가할 때 유용한 사용법입니다. 단, 콜백 함수는 this 키워드 말고는 인자 전달이 불가합니다. this 키워드는 움직이 있었던 DOM 요소를 의미합니다. 만일 여러개의 요소를 움직인다면, 중요하게 고려해야 할 사항이 있는데 콜백함수는 각 요소의 효과가 끝날때마다 호출 된다는 것입니다.
이미지를 예로 보겠습니다.
<div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" />
.toggle() 함수를 사용해 보겠습니다.
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
아래와 같이 동작합니다.
두번째 클릭을 하면
showOrHide 를 사용하는 방법을 보겠습니다. 이 인자가 true라면 요소가 보이는 상태이고, false라면 보이지 않는 상태입니다. 이것을 이용해서 스크립트를 작성해 보겠습니다.
$('#foo').toggle(showOrHide);if ( showOrHide == true ) {
$('#foo').show();
} else if ( showOrHide == false ) {
$('#foo').hide();
}
.show() 를 포함하여 모든 jQuery effect 들은, 글로벌 세팅인 jQuery.fx.off = true로 조절할 수 있습니다. 더 많은 정보를 원하시면 jQuery.fx.off를 참고하십시오.
예 제
모든 p 태그를 토글합니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
미리보기
토글이 되면서 마치 바뀌는 것 같습니다. 사실 각각의 p 태그가 토글되고 있는 겁니다.
예 제
시간값을 설정하여 토글 시 애니메이션 효과를 가지게 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});
</script>
</body>
</html>
미리보기
본문에서 처럼 width, height, opacity 가 바뀝니다.
예 제
S모든 p 태그를 표시한 다음, 앞뒤로 숨깁니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
</script>
</body>
</html>
미리보기
이 예제는 무슨 의미인지 잘 모르겠네요. ^^;;
토글함수는 jquery의 진리입니다. 아주 유용해요. 잘 사용하세요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery.ajaxPrefilter() $.ajax() 함수 호출 전 Ajax 옵션 수정 (0) | 2012.06.19 |
|---|---|
| ajaxError() Ajax 에러가 발생되면 호출 (0) | 2012.06.19 |
| ajaxComplete() Ajax가 완료되면 호출 (4) | 2012.06.15 |
| jQuery.ajax() HTTP 비동기 데이터 교환 (0) | 2012.06.12 |
| jQuery .stop(), 애니메이션 효과 멈춤 (0) | 2012.05.08 |
| slideUp(), 슬라이드 효과로 숨기기 (0) | 2012.04.25 |
| slideToggle(), 슬라이드 토글하기 (1) | 2012.04.25 |
| slideDown(), 슬라이드 효과로 보이기 (0) | 2012.04.25 |