Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Developer Gonie

[8주차] 26. CSS의 display 속성을 none <-> inline/block [ show(), hide() ] 본문

K-DigitalTraining 강의/7. JQuery

[8주차] 26. CSS의 display 속성을 none <-> inline/block [ show(), hide() ]

이대곤 2022. 7. 17. 11:06

* toggle과 다른 것은 toggle은 하나만 가지고 숨겼다 보여졌다 하는데 이건 기능이 분리되어 있다는 것임

 

1) show()

CSS의 display 속성을 원래대로 변화시켜, 눈에 다시 보이게 됨

 

2) hide()

CSS의 display 속성을 none 으로 변화시켜, 요소는 그대로 존재하지만 눈에 안보이게 됨

사용예시

* show(), hide()에 추가된 fuction은 전부 다 요소가 보여진 다음에 마지막에 실행된다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ex01_show_hide.html</title>
	<style>
		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(); // display : none 이던게 다시 원래의 inline 값을 가지며 보여짐
			});
			
			// 두번째 버튼을 클릭했을 때
			$('button').eq(1).click(function(){
				$('span:first').hide(); // display : inline 이던게 다시 none 값을 가지며 안보임
			});
			
			// 세번째 버튼을 클릭했을 때
			$('button').eq(2).click(function(){
				$('span:eq(1)').show(5000,function(){
					$(this).css('background', 'yellow'); // 글자가 다 보여지고 난 다음에 실행됨
				}); // show()에 왼쪽과 같이 인자를 주면 5초에 걸쳐서 보여지고, 마지막에 해주고싶은게 있으면 function을 추가로 줄 수 있음
			});
			
			// 네번째 버튼을 클릭했을 때
			$('button').eq(3).click(function(){
				//2번쨰 span
				$('span:eq(1)').hide('slow',function(){ // 'slow/fast' 대신에 숫자로 시간으로 지정할 수 있기도 함.
					alert(1);
				}); // show()의 반대 액션
			});
		});
	</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>
저작자표시

'K-DigitalTraining 강의 > 7. JQuery' 카테고리의 다른 글

[8주차] 28. 사진을 위 아래 혹은 좌우로 부드럽게 움직이게 하기 [ animate() ]  (0) 2022.07.17
[8주차] 27. CSS의 display 속성을 none <-> inline/block [ fadeIn(), fadeOut() ]  (0) 2022.07.17
[8주차] 25. CSS의 display 속성을 none <-> inline/block [ toggle() ]  (0) 2022.07.16
[8주차] 24. 선택박스 select 요소의 change() 이벤트 처리  (0) 2022.07.16
[8주차] 23. 이벤트 핸들러를 붙이거나 제거(새로 추가된 요소에도 위임됨) [ live(), die() ]  (0) 2022.07.16
'K-DigitalTraining 강의/7. JQuery' Related Articles more
Comments