JQuery

[jQuery] show hide

NamGH 2023. 9. 22. 10:42
show : 요소 보이기(문서 객체를 크게 하여 보여 준다.) 엘리먼트를 나타나게 함
hide  : 요소 숨기기(문서 객체를 작게 하여 사라지게 한다.) 엘리먼트를 사라지게 함
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	span{
		display: none; /* 글자 숨기기 */
	}
</style>
<script src = ../js/jquery.js type="text/javascript"></script>
<script type="text/javascript">
	$(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');
			});
		});
		$('button:eq(3)').click(function(){
			$('span:eq(1)').hide(5000,function(){
				alert(1);
			});
		});
		
		$('button:last').click(function(){
			$('span:last').toggle();
		});
	});//ready
</script>
</head>
<body>
	<button>Show</button>	<button>Hide</button>
	<span>안녕하세요</span>
	<br><br>
	
	<button>Show slow</button>	<button>Hide slow</button>
	<span>반갑습니다</span>
	<br><br>
	
	<button>Show/Hide</button>
	<span>또 만나요~</span>
	<br><br>
</body>
</html>

 

실행화면
초기화면
show

 

코드 설명
line22~23 : show가 보일때까지의 시간을 5초로 설정했고 css를 활용해 배경색이 노란색이 되도록 설정