728x90
* 기본형
| $("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백함수); |
투명도는 0~1까지의 값을 입력할 수 있으며, 1에 가까울수록 선명하다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 효과와 애니메이션 </title> <script src="js/jquery.js"></script> <script> $(function( ) { $(".btn2").hide(); //[slieUp]버튼을 클릭하면 class값이 "box"인 요소가 위로 접히며 숨겨진다. 그런 다음 콜백함수가실행되어 [slideUp] 버튼은 숨겨지고 [fadeIn]버튼이 나타난다. $(".btn1").on("click", function( ) { $(".box").slideUp(1000, "linear", function( ) { $(".btn1").hide( ); $(".btn2").show( ); }); }); $(".btn2").on("click", function( ) { $(".box").fadeIn(1000, "swing", function( ) { $(".btn2").hide( ); $(".btn1").show( ); }); }); //[toggleSlide] 버튼을 클릭하면 class값이 "box"인 요소가 접히거나 퍼진다. $(".btn3").on("click", function( ) { $(".box").slideToggle(1000, "linear"); }); //fadeTo(0,3)을 클릭하면 class 값이 "box"인 요소가 70% 투명해진다. 다시 클릭하면 투명화를 취소한다. $(".btn4").on("click", function( ) { $(".box").fadeTo("fast", 0.3); }); $(".btn5").on("click", function( ) { $(".box").fadeTo("fast", 1); }); }); </script> <style> .content{ width:400px; background-color: #eee; } </style> </head> <body> <p> <button class="btn1">slideUp</button> <button class="btn2">fadeIn</button> </p> <p> <button class="btn3">toggleSide</button> </p> <p> <button class="btn4">fadeTo(0.3)</button> <button class="btn5">fadeTo(1)</button> </p> <div class="box"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat consectetur nibh, ut luctus urna placerat non. Phasellus consectetur nunc nec mi feugiat egestas. Pellentesque et consectetur mauris, sed rutrum est. Etiam odio nunc, ornare quis urna sed, fermentum fermentum augue. Nam imperdiet vestibulum ipsum quis feugiat. Nunc non pellentesque diam, nec tempor nibh. Ut consequat sem sit amet ullamcorper sodales. </div> </div> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| stop() / delay() 메서드 (0) | 2021.08.25 |
|---|---|
| animate() 메서드 (0) | 2021.08.25 |
| 효과 및 애니메이션 메서드 (0) | 2021.08.25 |
| change() 이벤트 메서드 (0) | 2021.08.23 |
| focus() / blur() / focusin() / focusout() 메서드 (0) | 2021.08.23 |