jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드

.hide()

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

문법 1

.hide()

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

문법 2

.hide( duration [, easing ] [, complete ] )
  • duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫자를 넣을 수 있습니다. 숫자의 단위는 1000분의 1초입니다. 기본값은 400입니다.
  • easing : 사라지는 방식입니다. swing과 linear가 가능합니다. 기본값은 swing입니다.
  • complete : 사라진 다음 실행할 함수를 넣을 수 있습니다.

예제

버튼을 클릭하면 회색 박스가 사라집니다.

  • 첫번째 버튼 : 바로 사라집니다.
  • 두번째 버튼 : 1초 동안 swing 방식으로 사라집니다.
  • 세번째 버튼 : 1초 동안 linear 방식으로 사라집니다.
  • 네번째 버튼 : 사라졌다가 다시 나타납니다.
<!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>
    <style>
      div.box {
        height: 50px;
        border: 1px solid #bcbcbc;
        background-color: #dadada;
      }
    </style>
    <script>
      $( document ).ready( function() {
        $( 'button.hide1' ).click( function() {
          $( '.box1' ).hide();
        } );
        $( 'button.hide2' ).click( function() {
          $( '.box2' ).hide( 1000 );
        } );
        $( 'button.hide3' ).click( function() {
          $( '.box3' ).hide( 1000, 'linear' );
        } );
        $( 'button.hide4' ).click( function() {
          $( '.box4' ).hide( 1000, 'linear', function() {
            $( this ).show( 1000 );
          } );
        } );
      } );
    </script>
  </head>
  <body>
    <p><button class="hide1">Hide</button></p>
    <p><code>.hide();</code></p>
    <div class="box box1"></div>
    <p><button class="hide2">Hide</button></p>
    <p><code>.hide( 1000 );</code></p>
    <div class="box box2"></div>
    <p><button class="hide3">Hide</button></p>
    <p><code>.hide( 1000, 'linear' );</code></p>
    <div class="box box3"></div>
    <p><button class="hide4">Hide</button></p>
    <p><code>.hide( 1000, 'linear', function() { $( this ).show( 1000 ); } );</code></p>
    <div class="box box4"></div>
  </body>
</html>

Related Posts

jQuery / Plugin / slick / 슬라이더 플러그인

jQuery / Plugin / slick / 슬라이더 플러그인

slick은 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://kenwheeler.github.io/slick/ GitHub : https://github.com/kenwheeler/slick/ 기본 사용법 jQuery, slick.css, slick-theme.css, slick.min.js를 연결합니다. 아래는 CDN을 이용하여 연결하는 코드입니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> 아래와 같은 형식으로 마크업합니다. 클래스 값 slider는 변경해도 됩니다. <div class="slider"> <div><img src="images/slider-1920x1080-01.png" alt=""></div> <div><img src="images/slider-1920x1080-02.png" alt=""></div> <div><img src="images/slider-1920x1080-03.png" alt=""></div> <div><img src="images/slider-1920x1080-04.png" alt=""></div> ...

jQuery / 천 단위 쉼표 만드는 방법

jQuery / 천 단위 쉼표 만드는 방법

예제 1 텍스트로 출력된 숫자에 천 단위 쉼표를 넣는다. <!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() { $( '#jb' ).text( ...

jQuery / Method / .parent() - 부모 요소 선택하는 메서드

jQuery / Method / .parent() - 부모 요소 선택하는 메서드

.parent() .parent()는 어떤 요소의 부모 요소를 선택합니다. 문법 .parents( ) selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택합니다. 예를 들어 $( 'p' ).parent().css( 'color', 'green' ); 은 p의 부모 요소의 색을 녹색으로 만들고, $( 'p' ).parent( 'div' ).css( 'color', 'green' ); 은 p의 부모 요소가 div일 때만 녹색으로 만듭니다. 예제 ef를 클래스 값으로 갖는 ...

jQuery / Method / .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드

jQuery / Method / .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드

.fadeOut() .fadeOut()은 선택한 요소를 서서히 사라지게 합니다. 문법 .fadeOut( ) duration duration에는 완전히 사라질 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.before() .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다. 문법 .before( content ) 예를 들어 $( 'h1' ).before( '<p>Hello</p>' ); 는 h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가합니다. $( 'h1.a' ).before( $( 'p.b' ) ); 는 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 ...

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다. 다른 라이브러리와 충돌 다른 버전의 jQuery와 충돌 각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다. 다른 라이브러리와 충돌 jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 ...

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

.prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다. 문법 1 .prop( propertyName ) 속성값을 가져옵니다. 문법 2 .prop( propertyName, value ) 속성값을 추가합니다. 예제 1 a 요소의 href 속성값을 .attr()과 .prop()로 가져와서 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

.appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다. 문법 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 p 요소를 blockquote 요소 안으로 이동시킵니다. 예제 abc를 클래스 값으로 가지는 span 요소를 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> ...

jQuery / Method / .submit() - 폼 전송 이벤트

jQuery / Method / .submit() - 폼 전송 이벤트

.submit()을 이용하여 폼 전송을 제어할 수 있다. 다음은 이를 활용한 몇 가지 예제이다. select 선택 시 바로 폼 전송 select에서 값을 선택하면 바로 전송을 한다. 동적(다단계) 셀렉트 박스 만들 때 유용하다. <!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> ...