-
jQuery - .fadeIn()jQuery 2020. 6. 23. 15:57
.fadeIn()
- 선택한 요소를 서서히 나타나게 한다.
문법
.fadeIn( [duration] [, easing] [,complete])duration
duration에는 완전히 나타날 때까지의 시간이 들어간다. fast, slow로 정하거나 400같은 숫자로 정할 수 있따.
숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당하낟. 아무것도 입력하지 않으면
기본값으로 400이 설정된다.
문자로 시간을 정할 때는 싱글 쿼테이션(' ') 안에 문자를 넣는다.
.fadeIn('slow')숫자로 시간을 정할 때는 숫자만 넣는다.
.fadeIn(600)easing
easing에는 사라지는 모양이 들어간다. swing과 linear가 가능하며, 기본값은 swing이다.
싱글 쿼테이션안에 값을 넣는다.
fadeIn('linear')complete
complete에는 지정한 요소가 나타난 다음 불러올 함수가 들어간다.
.fadeIn(function(){ //function })
예제1
- 2초후에 h1 요소가 나타난다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> h1.fi { display: none; } </style> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'h1.fi' ).fadeIn( 2000 ); } ); </script> </head> <body> <button onClick="window.location.reload()">새로 고침</button> <h1 class="fi">Lorem ipsum dolor.</h1> </body> </html>
예제2
- 2초 후에 h1요소가 나타나고 글자가 빨간색으로 바뀐다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> h1.fi { display: none; } </style> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'h1.fi' ).fadeIn( 2000, function() { $( this ).css( 'color', 'red' ); } ); } ); </script> </head> <body> <button onClick="window.location.reload()">새로 고침</button> <h1 class="fi">Lorem ipsum dolor.</h1> </body> </html>
* fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드
fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드
slideUp() - 요소를 위쪽으로 사라지게 하는 메서드
slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
'jQuery' 카테고리의 다른 글
jQuery - .fadeToggle() (0) 2020.06.23 jQuery - .fadeOut() (0) 2020.06.23 jQuery - .empty() (0) 2020.06.23 jQuery - .each() (0) 2020.06.23 jQuery - .detach() (0) 2020.06.23