📌 jQuery – .show() 와 .hide() 사용하기
jQuery에서는 HTML 요소를 손쉽게 보이거나 숨길 수 있는 메서드를 제공합니다. 이번 예제에서는 버튼 클릭을 통해 텍스트(<span>)를 제어하는 방법을 살펴봅니다.
✅ 주요 메서드
- .show()
- 선택한 요소를 보이게 합니다.
- 인자로 시간을 주면 애니메이션 효과로 점점 나타납니다.
- show(5000) → 5초 동안 서서히 보이기
- .hide()
- 선택한 요소를 숨깁니다.
- 인자로 시간을 주면 점점 사라지는 애니메이션 효과를 줍니다.
- 콜백 함수 (callback)
- 애니메이션이 끝난 후 실행할 작업을 지정할 수 있습니다.
- 예) .show(5000, function(){ $(this).css('background','yellow'); });
✅ 코드 설명
$(document).ready(function(){
// 첫 번째 버튼: 보이기
$('button:eq(0)').click(function(){
$('span:first').show(); // 즉시 보이기
});
// 두 번째 버튼: 숨기기
$('button:eq(1)').click(function(){
$('span:first').hide(); // 즉시 숨기기
});
// 세 번째 버튼: 천천히 보이기 + 콜백으로 배경색 변경
$('button:eq(2)').click(function(){
$('span:eq(1)').show(5000, function(){
$(this).css('background','yellow'); // 5초 후 노란색 배경
});
});
});✅ 전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex01_show_hide.html</title>
<style>
span { display:none } /* 처음엔 숨김 */
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 첫 번째 버튼: 보이기
$('button:eq(0)').click(function(){
$('span:first').show();
});
// 두 번째 버튼: 숨기기
$('button:eq(1)').click(function(){
$('span:first').hide();
});
// 세 번째 버튼: 천천히 보이기 + 배경색
$('button:eq(2)').click(function(){
$('span:eq(1)').show(5000, function(){
$(this).css('background','yellow');
});
});
});
</script>
</head>
<body>
<button>Show It</button> <button>Hide It</button>
<span>안녕하세요.</span> <br>
<button>Show It slow</button> <button>Hide It slow</button>
<span>반갑습니다.</span><br>
<button>Show/Hide</button>
<span>또 만나요</span>
</body>
</html>
✅ 실행 결과
- 첫 번째 버튼 → "안녕하세요." 보임
- 두 번째 버튼 → "안녕하세요." 숨김
- 세 번째 버튼 → "반갑습니다."가 5초에 걸쳐 나타나고, 끝나면 배경이 노란색으로 바뀜
📝 정리
- .show() → 요소 보이기 (애니메이션 가능)
- .hide() → 요소 숨기기 (애니메이션 가능)
- 콜백 함수를 활용하면 애니메이션 종료 후 추가 작업도 가능
'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 11. JQuery _ .magify(); 확대 (0) | 2025.09.09 |
|---|---|
| 10. Jquery_ .animate()를 활용한 이미지 슬라이드 (0) | 2025.09.09 |
| 08. jQuery_change() (1) | 2025.09.09 |
| 07. jQuery_bind() (1) | 2025.09.09 |
| 06. JQuery_ .empty() 와 .remove() (0) | 2025.09.09 |