페이드효과
해당요소의 CSSopacity 속성값 빠르게 변경하여 표현
.fadeIn() 선택한 opacity 속성을 높여가며 요소를 나타나게한다
.fadeOut() 선택한 opacity 속성을 높여가며 요소를 사라지게한다
.fadeToggle() fadeIn과 fadeOut번갈아가며 적용한다
밀리초나 "slow" , "fast"등 예약어 전달하여 이펙트효과의 속도조절가능
ex) .fadeIn(4000) .fadeOut("slow") .fadeToggle("fast")
<script src="https://code.jquery.com/jquery3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<body>
<button id="fadein">페이드</button>
<button id="fadeout">페이드아웃</button>
<button id="fadetoggle">페이드토글</button> <br><br>
<span id="fade_p" style="background-color: yellow; padding: 10px;">페이드인아웃입니다</span> <br><br>
<span id="fade_toggle" style="background-color: yellowgreen; padding: 10px;">페이드토글입니다</span>
<script>
//fadeIn
$("#fadein").on("click", function () {
$("#fade_p").fadeIn("fast");
});
//fadeOut
$("#fadeout").on("click", function () {
$("#fade_p").fadeOut();
});
//fadeToggle
$("#fadetoggle").on("click", function () {
$("#fade_toggle").fadeToggle();
});
</script>
</body>
'JQuery' 카테고리의 다른 글
| 이펙트효과제어 .delay() .stop() .finish() (0) | 2022.03.11 |
|---|---|
| 슬라이드효과 (slide) .slideUp() .slideDown() .slide Toggle (0) | 2022.03.11 |
| 이펙트(effect) 효과 .hide() .show() .toggle() (0) | 2022.03.11 |
| JQuery on() one() off() (0) | 2022.03.10 |
| jQuery (0) | 2022.03.08 |