1. hide()
- 선택적 콜백 매개변수는 또는 메소드가 완료된 후 실행되는 함수
2. show()
- 숨겨진 요소를 화면에 보여주는 함수
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Hide and Show</h1> <hr> <p>실습하기</p> <button id="hide">Hide</button> <button id="show">Show</button> <script> $(document).ready(function () { $("#hide").click(function () { $("p").hide(); }); $("#show").click(function () { $("p").show(); }); }); </script> </body> </html>
3. 속도를 지정하기
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Hide and Show</h1> <hr> <p>실습하기</p> <button id="hide">Hide</button> <button id="show">Show</button> <script> $(document).ready(function () { $("#hide").click(function () { $("p").hide(1000); }); $("#show").click(function () { $("p").show(1000); }); }); </script> </body> </html>
4. toggle() 사용하기
- 숨기기와 표시 사이를 전환 -> 표시된 요소는 숨겨지고 숨겨진 요소는 표시
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Hide and Show</h1> <hr> <p>실습하기</p> <button id="hide">Hide</button> <button id="show">Show</button> <script> $(document).ready(function () { $("button").click(function () { $("p").toggle(1000); }); }); </script> </body> </html>
Share article
