[jQuery]제이쿼리 fadeIn, fadeOut 이펙트 효과 사용하기
- 웹/JQuery
- 2020. 5. 2.
[jQuery]제이쿼리 fadeIn, fadeOut 이펙트 효과 사용하기
안녕하세요. 오늘은 제이쿼리의 fade 효과에대해서 알아볼게요.
.fadeIn() : 실행시 숨겨진 요소를 나타나게 한다.
.fadeOut() : 실행시 요소를 사라지게 한다.
.fadeToggle() : 실행시 fadeIn() 메소드와 fadeOut() 메소드를 번갈아 가면서 적용한다.
.fadeTo() : fade 효과에서 사용하는 opacity 속성값을 직접 설정한다.
직접 코드로 확인해보죠
jQuery fadeIn() Method
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeIn").click(function(){
$("#testDiv1").fadeIn(); //기본 fadeIn 메소드
$("#testDiv2").fadeIn("slow"); // fadeIn slow 적용
$("#testDiv3").fadeIn(6000); // 시간설정 6초
});
});
</script>
</head>
<body>
<button id="fadeIn">페이드 인 실행</button><br><br>
<div style="padding-left:300px">
<div id="testDiv1" style="width:100px;height:80px;display:block;background-color:black;float:left;"></div>
<div id="testDiv2" style="width:100px;height:80px;display:block;background-color:skyblue;float:left;"></div>
<div id="testDiv3" style="width:100px;height:80px;display:block;background-color:yellow;float:left;"></div>
</div>
</body>
</html>
$("#testDiv2").fadeIn("slow"); // 속성을 slow로 주었습니다. fast/slow로 설정할수 있습니다.
.fadeIn("slow") // 600
.fadein("fast") // 200
$("#testDiv3").fadeIn(6000); // 1/1000 초로 계산하여 6000은 6초입니다.
아래는 실행결과 입니다.
점점 희미하게 생기는것을 보실 수 있습니다.
jQuery fadeOut() Method
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOut").click(function(){
$("#testDiv1").fadeOut();
$("#testDiv2").fadeOut("slow");
$("#testDiv3").fadeOut(6000);
});
});
</script>
</head>
<body>
<button id="fadeOut">페이드 아웃 실행</button><br><br>
<div style="padding-left:300px">
<div id="testDiv1" style="width:100px;height:80px;display:block;background-color:black;float:left;"></div>
<div id="testDiv2" style="width:100px;height:80px;display:block;background-color:skyblue;float:left;"></div>
<div id="testDiv3" style="width:100px;height:80px;display:block;background-color:yellow;float:left;"></div>
</div>
</body>
</html>
실행결과 서서히 사라지는것을 보실수 있습니다.
jQuery fadeToggle() Method
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("fadeToggle").click(function(){
$("#testDiv1").fadeToggle();
$("#testDiv2").fadeToggle("slow");
$("#testDiv3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<button id="fadeToggle">페이드 토글 실행</button><br><br>
<div style="padding-left:300px">
<div id="testDiv1" style="width:100px;height:80px;display:block;background-color:black;float:left;"></div>
<div id="testDiv2" style="width:100px;height:80px;display:block;background-color:skyblue;float:left;"></div>
<div id="testDiv3" style="width:100px;height:80px;display:block;background-color:yellow;float:left;"></div>
</body>
</html>
실행결과입니다. fadeToggle은 클릭할때 요소가 있으면 사라지게하고, 없으면 나타나게 합니다.
jQuery fadeTo() Method
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeTo").click(function(){
$("#testDiv1").fadeTo("slow", 0.15);
$("#testDiv2").fadeTo("slow", 0.4);
$("#testDiv3").fadeTo("slow", 0.7);
});
});
</script>
</head>
<body>
<button id="fadeTo">페이드 투 실행</button><br><br>
<div style="padding-left:300px">
<div id="testDiv1" style="width:100px;height:80px;display:block;background-color:black;float:left;"></div>
<div id="testDiv2" style="width:100px;height:80px;display:block;background-color:skyblue;float:left;"></div>
<div id="testDiv3" style="width:100px;height:80px;display:block;background-color:yellow;float:left;"></div>
</div>
</body>
</html>
실행결과입니다 ㅎㅎ
버튼을 클릭하게 되면 지정해둔 투명도로 변경됩니다.
오늘은 제이쿼리 이펙트 효과인 fadeIn, fadeOut, fadeToggle, fadeTo 에 대해서 알아보았습니다.!
수고하셨습니다!
'웹 > JQuery' 카테고리의 다른 글
| [jQuery]제이쿼리 숫자(천단위)콤마 찍기 및 제거 (0) | 2020.05.04 |
|---|---|
| [jQuery] 제이쿼리 each(), foreach, for반복문 예제 (0) | 2020.05.03 |
| [jQuery] 제이쿼리 attr(), prop() 비교 및 차이점을 알아보자 (0) | 2020.05.01 |
| [jQuery] 제이쿼리 checkbox checked, 전체 선택, 전체 해제[체크박스] (0) | 2020.04.30 |
| [jQuery] 제이쿼리 show, hide div 보여주기/숨기기 (0) | 2020.04.25 |