jQuery 강좌 | Methods > .hide()

.hide()는 선택한 요소를 사라지게 합니다.

문법 1

.hide()

선택한 요소를 즉시 사라지게 합니다.

문법 2

.hide( duration [, easing ] [, complete ] )

선택한 요소를 duration에서 설정한 만큼 서서히 사라지게 합니다. duration에는 slow, fast, 숫자를 넣을 수 있습니다. 숫자의 단위는 1000분의 1초입니다. 기본값은 400입니다.

easing에는 사라지는 방식을 넣습니다. swing과 linear가 가능합니다. 기본값은 swing입니다.

complete에는 사라진 다음 실행할 함수를 넣을 수 있습니다.

예제

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

버튼을 클릭하면 이미지가 사라지는 예제입니다.

  • 첫번째 버튼 : 바로 사라집니다.
  • 두번째 버튼 : swing 방식으로, 사라지는데 1초가 걸립니다.
  • 세번째 버튼 : linear 방식으로, 사라지는데 1초가 걸립니다.
  • 네번째 버튼 : 사라졌다가 다시 나타납니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | .hide()</title>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button.jbHide1' ).click( function() {
          $( '.jbImg1' ).hide();
        } );
        $( 'button.jbHide2' ).click( function() {
          $( '.jbImg2' ).hide( 1000 );
        } );
        $( 'button.jbHide3' ).click( function() {
          $( '.jbImg3' ).hide( 1000, 'linear' );
        } );
        $( 'button.jbHide4' ).click( function() {
          $( '.jbImg4' ).hide( 1000, 'linear', function() {
            $( this ).show( 1000 );
          } );
        } );
      } );
    </script>
  </head>
  <body>
    <p><button class="jbHide1">Hide</button></p>
    <p><code>.hide();</code></p>
    <img src="images/jquery-mark-dark.gif" class="jbImg1">
    <p><button class="jbHide2">Hide</button></p>
    <p><code>.hide( 1000 );</code></p>
    <img src="images/jquery-mark-dark.gif" class="jbImg2">
    <p><button class="jbHide3">Hide</button></p>
    <p><code>.hide( 1000, 'linear' );</code></p>
    <img src="images/jquery-mark-dark.gif" class="jbImg3">
    <p><button class="jbHide4">Hide</button></p>
    <p><code>.hide( 1000, 'linear', function() { $( this ).show( 1000 ); } );</code></p>
    <img src="images/jquery-mark-dark.gif" class="jbImg4">
  </body>
</html>

Category

Created on 2014-11-18 00:50 | Updated on 2015-07-17 01:11

이 글을 공유하기

Kakao