jQuery / Reference / .slideDown()
개요
- .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다.
문법
.slideDown( [duration ] [, easing ] [, complete ] )
duration
- 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다.
- fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다.
easing
- 요소가 나타나는 방식을 정합니다.
- swing과 linear가 가능하며, 기본값은 swing입니다.
complete
- 요소가 나타난 후 수행할 작업을 정합니다.
예제 1
- 버튼을 클릭하면 파란색 배경의 div 요소가 아래쪽으로 나타납니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { display: none; height: 100px; background-color: #bbdefb; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideDown();
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<div class="b"></div>
</body>
</html>
예제 2
- 나타나는 속도를 비교하는 예제입니다. 왼쪽 요소의 나타나는 시간은 400, 오른쪽 요소는 1200입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { display: none; height: 500px; background-color: #bbdefb; }
.c { display: none; height: 500px; background-color: #ffcdd2; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideDown( 400 );
$( '.c' ).slideDown( 1200 );
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<table style="width: 100%; height: 500px;">
<tr>
<td style="vertical-align: top;"><div class="b"></div></td>
<td style="vertical-align: top;"><div class="c"></div></td>
</tr>
</table>
</body>
</html>
예제 3
- swing와 linear를 비교하는 예제입니다. easing은 가변 속도이고, linear는 고정 속도입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { display: none; height: 500px; background-color: #bbdefb; }
.c { display: none; height: 500px; background-color: #ffcdd2; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideDown( 2000, 'swing' );
$( '.c' ).slideDown( 2000, 'linear' );
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<table style="width: 100%; height: 500px;">
<tr>
<td style="vertical-align: top;"><div class="b"></div></td>
<td style="vertical-align: top;"><div class="c"></div></td>
</tr>
</table>
</body>
</html>
예제 4
- div 요소가 나타난 후 배경색이 바뀌는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { display: none; height: 100px; background-color: #bbdefb; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideDown( function() {
$( this ).css( 'background-color', '#ffcdd2' );
} );
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<div class="b"></div>
</body>
</html>
참고
- .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다.
- .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다.
jQuery / Reference / .slideDown()
개요 .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Reference / .slideUp()
개요 .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
개요 :button은 type이 button인 요소를 선택하는 선택자입니다. 문법 type이 button인 모든 요소를 선택합니다. $( ':button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택합니다. $( '.xy:button' ) 예제 type이 button인 요소의 글자 모양을 기울임꼴로 만듭니다. 클래스 값이 ab면서 type이 button인 요소의 글자 색은 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...
개요 .val()은 양식(form)의 값을 가져오거나 값을 설정합니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. var jb = $( 'input#jbInput' ).val(); 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. $( 'input#jbInput' ).val( 'ABCDE' ); 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, ...
jQuery / Reference / .addBack()
개요 .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 다음은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. $( 'ul' ).find( 'li' ).addBack() 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .wrapAll()
개요 .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 다음은 모든 p 요소를 모아서 div 태그로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div ...
jQuery / Reference / .prependTo()
개요 .prependTo()는 선택한 요소를 다른 요소의 시작 태그 뒤로 이동시킵니다. 문법 .prependTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 <h1> 뒤로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...
jQuery / Reference / .unwrap()
개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...
jQuery / Reference / .toggleClass()
개요 .toggleClass()로 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 다음은 p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. $( 'p' ).toggleClass( 'xyz' ); 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .insertAfter()
개요 .insertAfter()는 특정 요소 뒤에 요소를 추가하거나 이동시킵니다. 문법 .insertAfter( target ) 예제 1 h1 요소 뒤에 <p>World</p>를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; ...