jQuery 강좌 | Methods > .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
} )

예제

http://book.cmsfactory.net/jQuery/V01/Methods/fadeToggle-01.html

버튼을 클릭하면 h1 요소가 사라지고, 다시 클릭하면 나타나는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Method | .fadeToggle()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( 'h1' ).fadeToggle();
        } )
      } );
    </script>
  </head>
  <body>
    <button>Click</button>
    <h1>Lorem Ipsum Dolor</h1>
  </body>
</html>

Category

Created on 2014-03-05 02:35 | Updated on 2015-07-17 01:09

이 글을 공유하기

Kakao

Book navigation