[KH 정보교육원 당산] jQuery

Learn/KH정보교육원

[KH 정보교육원 당산] jQuery - 실습4

Dahoon06 2021. 6. 7. 21:47

728x90

jQuery - 서서히 보이기 show( ) 및 숨기기 hide( )

<script type="text/javascript">
	$(document).ready(function() {
		// 보여질 요소 : show()
		// 감춰질 요소 hide()
		$(".region").show();
		$("#moreRegion").hide();
		
		$("span.more").click(function(){
			$("#moreRegion").show("slow");
			$(this).hide("fast");
		});
	});
</script>

CSS

#my .hover {
cursor: pointer;
background-color: Yellow;
}

HTML

<body>

	<div class="region" style="display: none;">
		안녕하세요. 여기는 본문입니다. <span class="more">more...</span>
	</div>

	<div id="moreRegion" style="height: 100px; background-color: Yellow;">
		또 만나요
	</div>
</body>

jQuery - 서서히 보이기 fadeIn( ) 및 숨기기 fadeOut( )

<script type="text/javascript">
	$(document).ready(function() {
		//fadeIn() 투명도(alpha) => 서서히 나타나는 효과
		//fadeOut() 투명도(alpha) => 서서히 사라지는 효과
		
		$("#btn").click(function(){
			$("#first").fadeIn(3000);
			$("#second").fadeOut(3000);
		});
	});

CSS

#my .hover {
cursor: pointer;
background-color: Yellow;
}

div {
background-color: Silver;
height: 100px;
}

HTML

<body>

	<input type="button" id="btn" value="페이드 효과 주기" />
	<div id="first" style="display: none; background-color: Yellow;">
		첫번째 영역
	</div>

	<div id="second">또 만나요</div>
</body>

숨겨졌던 영역이 나오면서 기존에 있던 영역은 가려진다.

jQuery - 슬라이드업 slideUp( )

<script type="text/javascript">
	$(document).ready(function() {
		$("#btn").click(function(){
			$("#first").fadeIn(2000).slideUp(4000);
		});
		
	});
</script>

CSS

#my .hover {
cursor: pointer;
background-color: Yellow;
}

HTML

<body>

	<input type="button" id="btn" value="슬라이드 업" />

	<div id="first" style="display: none; background-color: Yellow; height: 100px;">
		첫번째 영역
	</div>

	<div id="second">두번째 영역</div>
</body>

jQuery - 여러가지 효과 동시 처리 animate( )

<script type="text/javascript">
	$(document).ready(function() {
		$("#moreRegion").hide();
		$("span.more").click(function(){
			$("#moreRegion").animate({height:'200px',width:'show', opacity:'slow'},"slow");
		});
		
	});
</script>

CSS

#my .hover {
cursor: pointer;
background-color: Yellow;
}

HTML

<body>

	<div class="region">
		안녕하세요. 여기는 본문입니다. <span class="more">more...</span>
	</div>

	<div id="moreRegion" style="height: 100px; background-color: Yellow;">
		또 만나요
	</div>
</body>

위의 첫번째 했던 실습과 결과는 비슷하다. more 글자를 클릭하게 되면 숨겨졌던 영역이 나오게 된다.

. 양이 너무 많다 ... 그냥 필요할때 갔다가 쓰자...

https://www.w3schools.com/jquery/jquery_ref_overview.asp.

jQuery Reference

jQuery Reference This section contains a complete jQuery reference documentation. jQuery Reference The jQuery reference contains a list of all jQuery selectors, methods, properties and events, along with examples.

www.w3schools.com

jquery_test_proto.war

1.20MB

728x90

'Learn > KH정보교육원' 카테고리의 다른 글

[KH정보교육원 당산] 61일(Ajax/JSON 정리 , MVC-쇼핑몰 준비) (0)	2021.06.08
[KH정보교육원 당산] Ajax , JSON (0)	2021.06.07
[KH 정보교육원 당산] 60일차(jQuery - 실습3) (0)	2021.06.07
[KH정보교육원 당산] jQuery - 실습 2 (0)	2021.06.02
[KH정보교육원 당산] 57일차 ( jQuery - 실습 1) (0)	2021.06.02

현재글[KH 정보교육원 당산] jQuery - 실습4

Dahoon06 Store