자바스크립트
웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.
2025.02.22 03:02
jQuery fadeIn() 메서드
jQuery fadeIn() 메서드는 HTML 요소의 투명도(Opacity)를 0에서 1로 변경하여 요소가 나타나는 효과를 주는 메서드입니다.
# 예제
# 소스 코드 분석
1. `$(document).ready(function() { ... });` : 문서가 로드되면 함수를 호출합니다.
2. `$(\'#btn\').click(function() { ... });` : #btn 버튼이 클릭되면 함수를 호출합니다.
3. `$(\'#box\').fadeIn(1000);` : #box 요소의 투명도(Opacity)를 0에서 1로 변경하여 요소가 나타나는 효과를 줍니다. 1000은 나타남에 걸리는 시간(밀리초)입니다.
# fadeIn() 메서드 소스 코드 분석
jQuery fadeIn() 메서드는 다음과 같이 구현되어 있습니다.
# 결론
jQuery fadeIn() 메서드는 HTML 요소의 투명도(Opacity)를 0에서 1로 변경하여 요소가 나타나는 효과를 주는 메서드입니다. 이 메서드는 `$(document).ready()` 함수와 `$(\'#btn\').click()` 함수를 사용하여 호출할 수 있습니다. 또한 fadeIn() 메서드의 소스 코드를 분석하여 메서드의 동작을 이해할 수 있습니다.
[PHP] sin - 사인
[PHP] round - float를 반올림합니다.
[PHP] pos - 현재의 별칭
[PHP] pi - pi 값 가져오기
[PHP] min - 가장 낮은 값 찾기
[PHP] each - 배열에서 현재 키와 값 쌍을 반환하고 배열 커서를 이동합니다.
[PHP] defined - 주어진 이름의 상수가 존재하는지 확인합니다.
[PHP] define - 명명된 상수를 정의합니다.
[PHP] asin - 아크 사인
[PHP] abs - 절대값
jQuery fadeIn() 메서드
- 나우호스팅 21일 전 2025.02.22 03:02
-
20
0
jquery .fadeIn() jQuery fadeIn() 메서드
jQuery fadeIn() 메서드는 HTML 요소의 투명도(Opacity)를 0에서 1로 변경하여 요소가 나타나는 효과를 주는 메서드입니다.
# 예제
#hostingforum.kr
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeIn() 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: blue;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">fadeIn()</button>
<script>
$(document).ready(function() {
$('#btn').click(function() {
$('#box').fadeIn(1000); // 1초 동안 나타남
});
});
</script>
</body>
</html>
# 소스 코드 분석
1. `$(document).ready(function() { ... });` : 문서가 로드되면 함수를 호출합니다.
2. `$(\'#btn\').click(function() { ... });` : #btn 버튼이 클릭되면 함수를 호출합니다.
3. `$(\'#box\').fadeIn(1000);` : #box 요소의 투명도(Opacity)를 0에서 1로 변경하여 요소가 나타나는 효과를 줍니다. 1000은 나타남에 걸리는 시간(밀리초)입니다.
# fadeIn() 메서드 소스 코드 분석
jQuery fadeIn() 메서드는 다음과 같이 구현되어 있습니다.
#hostingforum.kr
javascript
// jQuery fadeIn() 메서드 소스 코드
fade: function( speed, easing, callback ) {
return this.each(function() {
var elem = $(this),
op = elem.css("opacity"),
start = op,
prop = elem.css("-webkit-opacity") ? "webkitOpacity" : (elem.css("-moz-opacity") ? "mozOpacity" : (elem.css("opacity") ? "opacity" : (elem.css("filter") && elem.css("filter").indexOf("alpha") >= 0 ? "filter" : undefined)));
if (prop === "opacity") {
prop = "style.opacity";
}
if (prop === "filter") {
start = (parseFloat(start) || 0) + "";
}
if (prop === "webkitOpacity") {
start = (parseFloat(start) || 0) + "";
}
if (prop === "mozOpacity") {
start = (parseFloat(start) || 0) + "";
}
elem.css(prop, start);
if (prop === "opacity") {
elem.css("-webkit-opacity", start);
elem.css("-moz-opacity", start);
}
if (prop === "filter") {
elem.css("filter", "alpha(opacity=" + start + ")");
}
if (prop === "webkitOpacity") {
elem.css("-webkit-opacity", start);
}
if (prop === "mozOpacity") {
elem.css("-moz-opacity", start);
}
if (speed === "slow") {
speed = 600;
} else if (speed === "fast") {
speed = 200;
}
if (speed) {
elem.delay(speed).animate({ opacity: 1 }, speed, easing, callback);
} else {
elem.css(prop, 1);
if (prop === "opacity") {
elem.css("-webkit-opacity", 1);
elem.css("-moz-opacity", 1);
}
if (prop === "filter") {
elem.css("filter", "alpha(opacity=100)");
}
if (prop === "webkitOpacity") {
elem.css("-webkit-opacity", 1);
}
if (prop === "mozOpacity") {
elem.css("-moz-opacity", 1);
}
if (callback) {
callback.call(this);
}
}
});
}
# 결론
jQuery fadeIn() 메서드는 HTML 요소의 투명도(Opacity)를 0에서 1로 변경하여 요소가 나타나는 효과를 주는 메서드입니다. 이 메서드는 `$(document).ready()` 함수와 `$(\'#btn\').click()` 함수를 사용하여 호출할 수 있습니다. 또한 fadeIn() 메서드의 소스 코드를 분석하여 메서드의 동작을 이해할 수 있습니다.
이 게시물에 포함된 라이브러리
[NGINX] index - 기본 인덱스 파일을 설정합니다.[PHP] sin - 사인
[PHP] round - float를 반올림합니다.
[PHP] pos - 현재의 별칭
[PHP] pi - pi 값 가져오기
[PHP] min - 가장 낮은 값 찾기
[PHP] each - 배열에서 현재 키와 값 쌍을 반환하고 배열 커서를 이동합니다.
[PHP] defined - 주어진 이름의 상수가 존재하는지 확인합니다.
[PHP] define - 명명된 상수를 정의합니다.
[PHP] asin - 아크 사인
[PHP] abs - 절대값
댓글목록
등록된 댓글이 없습니다.