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 / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...
jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인
컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다. 유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 제목이나 콘트롤 바, 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 ...
예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );
jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인
jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...
jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드
.animate .animate()는 애니메이션 효과를 만듭니다. 문법 .animate( properties ) properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다. backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing duration 애니메이션 효과를 완료할 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 애니메이션 효과의 방식을 정합니다. swing과 linear이 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 ...
jQuery / Method / .add() - 요소를 추가로 선택하는 메서드
.add() .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 $( 'ul' ).add( 'p' ) 는 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. 예제 1 li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다. <!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 / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드
.val() .val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 var jb = $( 'input#jbInput' ).val(); 은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 $( 'input#jbInput' ).val( 'ABCDE' ); 는 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, 입력한 ...
.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...
jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드
.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...
jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드
.attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 문법 1 - 속성의 값 가져오기 선택한 요소의 속성의 값을 가져온다. .attr( attributeName ) 예를 들어 아래는 div 요소의 class 속성의 값을 가져온다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 선택한 요소에 속성을 추가한다. .attr( attributeName, value ) 예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 ...