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
