jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.fadeToggle()
.fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다.
문법
.fadeToggle( [duration ] [, easing ] [, complete ] )
duration
duration에는 사라지거나 나타나는데 걸리는 시간을 넣습니다. fast, slow로 정하거나 1000분의 1초 단위의 숫자로 정합니다. fast는 200, slow는 600에 해당하고 기본값은 400입니다.
문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다.
.fadeToggle( 'fast' )
숫자로 시간을 정할 때는 숫자만 넣습니다.
.fadeToggle( 600 )
easing
easing에는 사라지거나 나타날 때의 모양이 들어갑니다. swing과 linear가 가능하며 기본값은 swing입니다. 따옴표 안에 값을 넣습니다.
.fadeToggle( 'linear' )
complete
complete에는 지정한 요소가 사라진 다음 불러올 함수가 들어갑니다.
.fadeToggle( function() { // function } )
예제
버튼을 클릭하면 h1 요소가 사라지고, 다시 클릭하면 나타납니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'button' ).click( function() { $( 'h1' ).fadeToggle(); } ) } ); </script> </head> <body> <button>Click</button> <h1>Lorem Ipsum Dolor</h1> </body> </html>