Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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주차] 27. CSS의 display 속성을 none <-> inline/block [ fadeIn(), fadeOut() ] 본문

K-DigitalTraining 강의/7. JQuery

[8주차] 27. CSS의 display 속성을 none <-> inline/block [ fadeIn(), fadeOut() ]

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

* show(), hide()와 기능이 거의 같은데, 보여지는건 거의 같고 사라질 때의 시각적인 효과가 살짝 다름

 

1) fadeIn()

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

 

2) fadeOut()

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

사용예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex05_fadeIn_fadeOut.html</title>
<style>
p {
   width: 400px;
   height: 90px;
   border: 1px solid black;
}

div {
   position: absolute; 
   width: 400px;
   height: 65px;
   font-size: 36px;
   text-align: center;
   background: red;
   padding-top: 25px;
   top: 16px;
   left: 9px;
    display: none; 
}

span {
   display : none;
   color: yellow;
   
}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		//아래의 코드는 외부 브라우저에서는 실행이 안됐었으니 알고있자.
		
		//fadeIn 버튼 클릭했을 때, 글자가 먼저 1초에 걸쳐 보여지고, 그 이후에 div 영역이 1초에 걸쳐 보여짐 
		$('#fadeIn').click(function() {
			$('div').fadeIn(1000, function() {
				$('span').fadeIn(1000); //위의 영역이 모두 보여지고 난 뒤 실행되는 부분. 
			});
		});
		//fadeOut 버튼 클릭했을 때, 글자가 먼저 3초에 걸쳐 사라지고, 그 이후에 div 영역이 1초에 걸쳐 사라짐
		$('#fadeOut').click(function() {
			$('span').fadeOut(3000, function() {
				$('div').fadeOut(1000); //위의 영역이 모두 보여지고 난 뒤 실행되는 부분. 
			});
		});
	});
</script>
</head>
<body>
   <p>
   불투명도를 점점 높여서 보이도록 한다.
   speed를 fast, normal, slow 또는 0이상의 숫자(밀리세컨드   단위)를 준다.
   에니메이션이 끝난 후에 실행할 함수를 지정한다.
   </p>
   <div>
      <span> S U C C E S S ! </span>
   </div>
   <button id="fadeIn">fadeIn</button>
   <button id="fadeOut">fadeOut</button>
   <button id="fadeToggle">fadeToggle</button>
</body>
</html>
저작자표시

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

[8주차] 29. Ajax 공부전, XML과 JSON의 형식 차이알기  (0) 2022.07.17
[8주차] 28. 사진을 위 아래 혹은 좌우로 부드럽게 움직이게 하기 [ animate() ]  (0) 2022.07.17
[8주차] 26. CSS의 display 속성을 none <-> inline/block [ show(), hide() ]  (0) 2022.07.17
[8주차] 25. CSS의 display 속성을 none <-> inline/block [ toggle() ]  (0) 2022.07.16
[8주차] 24. 선택박스 select 요소의 change() 이벤트 처리  (0) 2022.07.16
'K-DigitalTraining 강의/7. JQuery' Related Articles more
Comments