2021-04-14
jquery에서 제공하는 효과 중 hide와 show 메서드가 존재한다. 메서드 이름에도 느껴지듯이 지정된 객체를 숨기고 드러내는 역할을 한다.
- 예제 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide() // hide 버튼 클릭시 div 태그 숨김
})
$("#show").click(function(){
$("div").show() // show 버튼 클릭시 div 태그 보여줌
})
})
</script>
</head>
<body>
<div>-----Hello World-----</div>
<button type="button" id="hide">hide</button>
<button type="button" id="show">show</button>
</body>
</html>
위의 예제 코드는 hide 의 클릭이벤트 발생 시에는 div 태그 내용을 숨기고, show의 클릭이벤트 발생 시 div 태그를 다시 나타내는 태그이다.
show를 눌렀을 경우
hide를 눌렀을 경우
- 추가사항
show 와 hide 에는 매개 값없이 사용하는 방법도 있지만 아래와 같이 두 가지 매개 값을 받을 수 있다. 첫 번째는 해당 메서드가 실행되는 속도이며, 두 번째는 콜백 함수이다.
$(selector). hide(속도, 콜백함수);
$(selector). show(속도, 콜백함수);
아래는 예제 코드이니 참고하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide(1000, function(){
console.log("Bye") // 숨겨짐과 동시에 Bye가 콘솔창에 남게된다.
}) // hide 버튼 클릭시 div 태그 숨김
})
$("#show").click(function(){
$("div").show(1000) // show 버튼 클릭시 div 태그 보여줌
})
})
</script>
</head>
<body>
<div>-----Hello World-----</div>
<button type="button" id="hide">hide</button>
<button type="button" id="show">show</button>
</body>
</html>
메인 이미지 출처: Photo by Marcos Paulo Prado on Unsplash