선택한 요소를 사라지게 하는 방법 - .hide()

hide는 선택한 요소를 사라지게 합니다. 사라지는 데 걸리는 시간을 넣습니다.
1 min read

.hide()

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

 

기본형 1

.hide()

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

 

기본형 2

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

 

예제

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

  • 첫번째 버튼 : 바로 사라집니다.
  • 두번째 버튼 : 1초 동안 swing 방식으로 사라집니다.
  • 세번째 버튼 : 1초 동안 linear 방식으로 사라집니다.
  • 네번째 버튼 : 사라졌다가 다시 나타납니다.
<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>
div.box {
  height: 50px;
  border: 1px solid #bcbcbc;
  background-color: #bbdefb;
}
$( 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 );
    });
  });
});

You may like these posts

  • .before() .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다.   기본형 .before( content [, content ] ) 예를 들어 $( 'h1' ).before( '<p>Hello</p>'…
  • .append() .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다.   기본형 .append( content [, content ] )   예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).appen…
  • .click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다.   기본형 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).clic…
  • .children() .children()은 어떤 요소의 자식 요소를 선택합니다.   기본형 .children( [ selector ] ) 예를 들어 $( 'div' ).children().css( 'color', 'blue' ); 는 <div> 요소의 자식 요소의 색을 파란색으…
  • .attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다.   기본형 1 .attr( attributeName ) 선택한 요소의 속성의 값을 가져옵니다. 예를 들어 $( 'div' ).attr( 'class' ); 는…
  • .appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다.   기본형 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 <p> 요소를 <blockquote> 요소 안으로 …

Post a Comment