-
jQuery - .slideUp()jQuery 2020. 6. 23. 19:29
.slideUp()
- 선택한 요소를 위쪽으로 서서히 사라지게 한다.
문법
.slideUp( [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 { 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' ).slideUp(); } ); } ); </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 { height: 500px; background-color: #bbdefb; } .c { 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' ).slideUp( 400 ); $( '.c' ).slideUp( 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 { height: 500px; background-color: #bbdefb; } .c { 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' ).slideUp( 2000, 'swing' ); $( '.c' ).slideUp( 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요소가 사라진 후 Complete라는 문자열을 나타내는 예제이다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .b { height: 100px; background-color: #bbdefb; } .c { display: none; } </style> <script src="//code.jquery.com/jquery-3.4.1.min.js"></script> <script> $( document ).ready( function() { $( 'button.a' ).click( function() { $( '.b' ).slideUp( function() { $( '.c' ).css( 'display', 'block' ); } ); } ); } ); </script> </head> <body> <p><button class="a">Click</button></p> <div class="b"></div> <p class="c">Complete</p> </body> </html>'jQuery' 카테고리의 다른 글
jQuery - .toggle() (0) 2020.06.23 jQuery - .text() (0) 2020.06.23 jQuery - .slideToggle() (0) 2020.06.23 jQuery - .slideDown() (0) 2020.06.23 jQuery - .slice(); (0) 2020.06.23