-
jQuery - .slideToggle()jQuery 2020. 6. 23. 19:22
.slideToggle()
- 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 한다.
문법
.slideToggle( [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' ).slideToggle(); } ); } ); </script> </head> <body> <p><button class="a">Click</button></p> <div class="b"></div> </body> </html>예제2
- 요소가 나타나거나 사라진 후 메시지 창을 띄운다.
<!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' ).slideToggle( 600, 'linear', function() { alert( 'Toggled' ); } ); } ); } ); </script> </head> <body> <p><button class="a">Click</button></p> <div class="b"></div> </body> </html>'jQuery' 카테고리의 다른 글
jQuery - .text() (0) 2020.06.23 jQuery - .slideUp() (0) 2020.06.23 jQuery - .slideDown() (0) 2020.06.23 jQuery - .slice(); (0) 2020.06.23 jQuery - .scrollTop() (0) 2020.06.23