jQuery fadeIn() 메서드란?
jQuery의 fadeIn() 메서드는 선택한 요소의 불투명도(opacity)를 조절하여 숨겨져 있던 요소를 서서히 보이게 만드는 애니메이션 효과를 제공합니다. 웹 페이지에서 요소가 자연스럽게 등장하는 연출이 필요할 때 유용하게 활용할 수 있으며, 반대 기능을 하는 fadeOut() 메서드와 함께 사용하면 더욱 완성도 높은 인터랙션을 구현할 수 있습니다.
문법(Syntax)
fadeIn() 메서드의 기본 문법은 다음과 같습니다.
$(selector).fadeIn(speed, easing, callback)
매개변수 설명
- speed: 페이드 효과가 진행되는 속도를 지정합니다. 밀리초 단위의 숫자(예: 500) 또는 "slow", "fast" 같은 문자열을 사용할 수 있으며, 생략하면 기본값인 400ms가 적용됩니다.
- easing: 애니메이션의 각 진행 시점별 속도 변화를 결정합니다. "swing"(기본값, 시작과 끝이 느리고 중간이 빠름) 또는 "linear"(일정한 속도) 중 하나를 선택할 수 있습니다.
- callback:
fadeIn()애니메이션이 모두 완료된 후에 실행할 함수를 지정합니다.
예제 코드
이제 fadeIn() 메서드를 실제로 구현한 예제를 살펴보겠습니다. 아래 코드에서는 "Fade out" 버튼을 클릭하면 div 영역의 텍스트가 사라지고, "Fade in" 버튼을 클릭하면 다시 나타납니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btnout").click(function(){
$("div").fadeOut();
});
$(".btnin").click(function(){
$("div").fadeIn();
});
});
</script>
</head>
<body>
<h2>Java</h2>
<div>
<p>Java released in 1994. The current version is Java 13.</p>
</div>
<button class="btnout">Fade out</button>
<button class="btnin">Fade in</button>
<p>Click on above buttons to fade out and fade in text.</p>
</body>
</html>코드 동작 원리
$(document).ready() 안에서 두 개의 클릭 이벤트 핸들러가 등록됩니다. 클래스가 btnout인 버튼을 클릭하면 모든 <div> 요소에 fadeOut()이 적용되어 텍스트가 서서히 사라지고, btnin 클래스 버튼을 클릭하면 fadeIn()이 실행되어 숨겨진 텍스트가 다시 나타납니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.
먼저 위쪽의 "Fade out" 버튼을 클릭해 보세요. 텍스트가 서서히 사라집니다.
이번에는 "Fade in" 버튼을 클릭해 보세요. 사라졌던 텍스트가 부드럽게 다시 나타나는 것을 확인할 수 있습니다.
