jQuery 강좌 | Methods > .fadeOut()

.fadeOut()은 선택한 요소를 서서히 사라지게 합니다.

문법

문법은 다음과 같습니다.

.fadeOut(duration, easing, complete)

duration

duration에는 완전히 사라질 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다.

문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다.

.fadeOut("slow")

숫자로 시간을 정할 때는 숫자만 넣습니다.

.fadeOut(600)

easing

easing에는 사라지는 모양이 들어갑니다. swing과 linear가 가능하며 기본값은 swing입니다. 따옴표 안에 값을 넣습니다.

.fadeOut("linear")

complete

complete에는 지정한 요소가 사라진 다음 불러올 함수가 들어갑니다.

.fadeOut(function() {
  // Function
})

예제 1

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

기본값으로 만든 예제입니다. 버튼을 클릭하면 h1 요소가 사라집니다.

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

예제 2

http://book.cmsfactory.net/jQuery/V01/Methods/fadeOut-02.html

swing과 linear의 차이를 볼 수 있는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | fadeOut()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function() {
        $("button").click(function() {
          $("h1.sw").fadeOut(1000, "swing");
          $("h1.ln").fadeOut(1000, "linear");
        });
      });
    </script>
  </head>
  <body>
    <h1 class="sw">Swing - Lorem ipsum dolor.</h1>
    <h1 class="ln">Linear - Lorem ipsum dolor.</h1>
    <button>Click Me.</button>
  </body>
</html>

예제 3

http://book.cmsfactory.net/jQuery/V01/Methods/fadeOut-03.html

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | fadeOut()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function() {
        $("button").click(function() {
          $("h1").fadeOut(1000, function() {
            $("h1").fadeIn();
          });
        });
      });
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
    <button>Click Me.</button>
  </body>
</html>
Category

Created on 2013-12-26 07:41 | Updated on 2015-07-17 01:08

이 글을 공유하기

Kakao