fadeIn
원문 링크 
http://api.jquery.com/fadeIn/
개요 : 서서히 나타나게 처리합니다.
- .fadeIn( [duration] [, callback] )
- duration 시간 값
- callback 콜백 함수
- .fadeIn( [duration] [, easing] [, callback] )
- duration 시간 값
- easing 특수한 효과 함수
- callback 콜백 함수
.fadeIn() 함수는 투명도를 조절하여 움직임을 만들어 내는 함수입니다.
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').fadeIn('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를 참고하십시오.
예 제
div들을 나타나게 해보겠습니다. 600 밀리세컨드 기준입니다.
<!DOCTYPE html>
<html>
<head>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
</script>
</body>
</html>미리보기
바로 적용가능합니다. 바로 사용해 보세요.
예 제
클릭하면 텍스트 노출 부분을 싹돠~ 덮어씁니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { position:relative; width:400px; height:90px; }
div { position:absolute; width:400px; height:65px;
font-size:36px; text-align:center;
color:yellow; background:red;
padding-top:25px;
top:0; left:0; display:none; }
span { display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (<a href="#">click!</a>)
<div><span>CENSORED!</span></div>
</p>
<script>
$("a").click(function () {
$("div").fadeIn(3000, function () {
$("span").fadeIn(100);
});
return false;
});
</script>
</body>
</html>미리보기
반 재미를 위한 예제이지만 멋집니다.
보이게 하고 안보이게 하고는 많이 사용되는 효과죠. 잘 공부해 두셨다가 활용하시기 바랍니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery.fx.interval, 에니메이션 프레임 조절 (0) | 2012.04.16 |
|---|---|
| fadeToggle(), 페이드 인/아웃 토글 (0) | 2012.04.16 |
| fadeTo(), 투명도를 조절하기 (0) | 2012.04.16 |
| fadeOut(), 서서히 사라지게 하기 (0) | 2012.04.16 |
| dequeue(), 대기열의 다음 함수 실행 (2) | 2012.04.16 |
| delay(), 대기열의 함수 실행을 지연시키기 (0) | 2012.04.16 |
| clearQueue(), 대기열의 함수를 제거 (0) | 2012.04.16 |
| animate(), 요소를 움직이기 (8) | 2012.03.30 |