jQuery 강좌 | Methods > .slideDown()

.slideDown()은 선택한 요소를 아래로 미끄러지듯 나타나게 합니다.

문법

기본 문법은 다음과 같습니다.

.slideDown( [duration ] [, complete ] )

duration

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

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

.slideDown( 'slow' )

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

.slideDown( 600 )

complete

complete에는 지정한 요소가 나타난 다음 불러올 함수가 들어갑니다.

.slideDown( function() {
  // Animation complete.
} )

예제 1

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

h1 요소가 서서히 내려오는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | .slideDown()</title>
    <style>
      h1 {
        display: none;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function() {
        $( 'h1' ).slideDown( 2000 );
      });
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
  </body>
</html>

예제 2

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

h1 요소가 서서히 내려온 후 글자색이 빨간색으로 변하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | .slideDown()</title>
    <style>
      h1 {
        display: none;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function() {
        $( 'h1' ).slideDown( 2000, function() {
          $( this ).css( 'color', 'red' );
        } );
      });
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
  </body>
</html>
Category

Created on 2014-01-24 03:58 | Updated on 2015-07-17 01:18

이 글을 공유하기

Kakao

Book navigation