fadeToggle
원문 링크 
http://api.jquery.com/fadeToggle/
개요 : 투명도를 조절하여 요소를 보이게 하거나 숨기는 효과를 줍니다.
- .fadeToggle( [duration] [, easing] [, callback] )
- duration 시간 값
- easing 특수한 효과 함수
- callback 콜백 함수
.fadeToggle() 함수는 투명도를 조절하여 움직임을 만들어 내는 함수입니다. 보이는 요소에 이 함수를 사용하면 투명도(opacity)가 0으로 수렴하고 0에 도달했을 때, display 속성을 none으로 처리합니다. 그래서 요소는 더 이상 페이지의 레이아웃 영향을 미치지 않습니다.
Durations 의 단위는 밀리세컨드(천분의 일초)입니다. 큰 값을 주면 느린 속도로 움직이고, 반대는 빨라집니다. 'fast' 나 'slow' 문자를 사용할 수 있으며 각각은 200 과 600 밀리세커드를 의미합니다. 만약 이 인자를 생략하면 기본값인 400 밀리세컨드로 움직이게 됩니다.
특수 효과 ( Easing )
Easing 함수란 스피드를 조작하여 특별한 효과를 나타나게 하는 함수를 의미합니다. jQuery 가 기본적으로 가지고 있는 easing 표현은 swing 과 linear 입니다. 더 많은 easing 효과들이 궁금하시면 jQuery UI suite를 방문하세요. 단, easing 함수는 플러그인 이므로 관련된 라이브러리를 포함해야 사용이 가능합니다.
Callback Function
애니메이션이 완료된 후 사용될 콜백함수입니다. 이 콜백함수는 인자를 전달할 수 없지만, this 를 이용하여 애니메이션이 일어난 요소 자체를 전달할 수는 있습니다. 만일 여러개의 요소에 움직임 효과를 주었다면 각각의 애니메이션 효과가 일어난 뒤에 개별적으로 콜백함수가 실행이 됩니다.
jQuery 1.6 버전부터는, deferred.done() 와 함께 .promise() 함수를 사용하여 모든 움직임이 끝난 후 한번만 콜백함수를 실행할 수 있게 되었습니다. ( .promise() 함수 예제 링크 ).
덧붙임 ( Additional Notes )
.fadeIn() 를 포함하여 모든 jQuery effect 들은, 글로벌 세팅인 jQuery.fx.off = true로 조절할 수 있습니다. 더 많은 정보를 원하시면 jQuery.fx.off를 참고하십시오.
음.. fade 계열 함수들 설명은 다 똑같아요. ㅎㅎ 페이지 수만 거저 늘렸네요. 흐흐흐
예 제
첫번째 p 요소를 페이드 600 밀리세컨드와 linear 효과로 토글 처리합니다. 두번째 p 요소는 200 밀리세컨드로 페이드 토글하고 완료후에 "finished" 메시지를 찍어 줍니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
<script>
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
});
</script>
</body>
</html>미리보기
첫번째 p 요소가 사라질 때, 영역이 축소되는 것을 눈여겨 보실 필요가 있겠습니다. fadeIn, fadeOut 을 동시에 처리하네요.
사실 이 함수가 더 유용할 수도 있겠습니다. 각각의 목적에 맞게 잘 사용하시기 바랍니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| queue(), 대기열의 함수와 대기열 조작하기 (0) | 2012.04.25 |
|---|---|
| hide(), 요소 숨기기 (2) | 2012.04.19 |
| jQuery.fx.off, 전체 애니메이션 효과 전역 설정 (0) | 2012.04.19 |
| jQuery.fx.interval, 에니메이션 프레임 조절 (0) | 2012.04.16 |
| fadeTo(), 투명도를 조절하기 (0) | 2012.04.16 |
| fadeOut(), 서서히 사라지게 하기 (0) | 2012.04.16 |
| fadeIn(), 서서히 나타나게 하기 (0) | 2012.04.16 |
| dequeue(), 대기열의 다음 함수 실행 (2) | 2012.04.16 |