fadeOut
원문 링크 
http://api.jquery.com/fadeOut/
개요 : 서서히 사라지게 처리합니다.
- .fadeOut( [duration] [, callback] )
- duration 시간 값
- callback 콜백 함수
- .fadeOut( [duration] [, easing] [, callback] )
- duration 시간 값
- easing 특수한 효과 함수
- callback 콜백 함수
.fadeOut() 함수는 투명도를 조절하여 움직임을 만들어 내는 함수입니다.
Durations 의 단위는 밀리세컨드(천분의 일초)입니다. 큰 값을 주면 느린 속도로 움직이고, 반대는 빨라집니다. 'fast' 나 'slow' 문자를 사용할 수 있으며 각각은 200 과 600 밀리세커드를 의미합니다. 만약 이 인자를 생략하면 기본값인 400 밀리세컨드로 움직이게 됩니다.
이미지를 나타나게 하는 간단한 예제를 보시죠.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete
});
});
특수 효과 ( Easing )
jQuery 1.4.3 버전에 와서, 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를 참고하십시오.
헉!! fadeIn이랑 똑같아요 ^^;;; 거저 먹었어요. ㅎㅎㅎ
예 제
p 요소들을 사라지게 해보겠습니다. 600 밀리세컨드 기준입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { font-size:150%; cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
<script>
$("p").click(function () {
$("p").fadeOut("slow");
});
</script>
</body>
</html>미리보기
클릭하면 사라집니다. 짜잔~
예 제
특정단어(마우스오버 시 노란배경이 깔리는)을 클릭하면 사라집니다.
<!DOCTYPE html>
<html>
<head>
<style>
span { cursor:pointer; }
span.hilite { background:yellow; }
div { display:inline; color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h3>Find the modifiers - <div></div></h3>
<p>
If you <span>really</span> want to go outside
<span>in the cold</span> then make sure to wear
your <span>warm</span> jacket given to you by
your <span>favorite</span> teacher.
</p>
<script>
$("span").click(function () {
$(this).fadeOut(1000, function () {
$("div").text("'" + $(this).text() + "' has faded!");
$(this).remove();
});
});
$("span").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
</script>
</body>
</html>미리보기
텍스트에 마우스를 쭈욱 흘려보시면 노란색 바탕이 깔리는 텍스트가 있습니다. 클릭해 보세요.
예 제
사라지게 하는데 효과를 줍니다. linear와 swing의 차이를 느껴보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.box,
button { float:left; margin:5px 10px 5px 0; }
.box { height:80px; width:80px; background:#090; }
#log { clear:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="btn1">fade out</button>
<button id="btn2">show</button>
<div id="log"></div>
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
<script>
$("#btn1").click(function() {
function complete() {
$("<div/>").text(this.id).appendTo("#log");
}
$("#box1").fadeOut(1600, "linear", complete);
$("#box2").fadeOut(1600, complete);
});
$("#btn2").click(function() {
$("div").show();
$("#log").empty();
});
</script>
</body>
</html>미리보기
사실 모니터에 코 대고 보지 않으면 잘 구분이 안됩니다. 기본 효과 말고 easing 효과 예제를 보시면 여러가지 효과들이 있죠. 그런데 쭈욱 봤는데 그닥 쓸만한 것은 없다는 불편한 진실..
보이게 하고 안보이게 하고는 많이 사용되는 효과죠. 잘 공부해 두셨다가 활용하시기 바랍니다. (fadeIn에 있는 그대로 ㅎㅎ)
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery.fx.off, 전체 애니메이션 효과 전역 설정 (0) | 2012.04.19 |
|---|---|
| jQuery.fx.interval, 에니메이션 프레임 조절 (0) | 2012.04.16 |
| fadeToggle(), 페이드 인/아웃 토글 (0) | 2012.04.16 |
| fadeTo(), 투명도를 조절하기 (0) | 2012.04.16 |
| fadeIn(), 서서히 나타나게 하기 (0) | 2012.04.16 |
| dequeue(), 대기열의 다음 함수 실행 (2) | 2012.04.16 |
| delay(), 대기열의 함수 실행을 지연시키기 (0) | 2012.04.16 |
| clearQueue(), 대기열의 함수를 제거 (0) | 2012.04.16 |