-
jQuery - .slideDown()jQuery 2020. 6. 23. 19:18
.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>'jQuery' 카테고리의 다른 글
jQuery - .slideUp() (0) 2020.06.23 jQuery - .slideToggle() (0) 2020.06.23 jQuery - .slice(); (0) 2020.06.23 jQuery - .scrollTop() (0) 2020.06.23 jQuery - .resize() (0) 2020.06.23