[8주차] 25. CSS의 display 속성을 none <-> inline/block [ toggle() ]

이대곤 2022. 7. 16. 16:46

바로 접었다 폈다하는 예제

* toggle() 함수의 인자로 이 속도를 조절할 수 있으니 이에 대한 예시는 맨 아래의 코드를 참고.

접혀지고 펼쳐지는 속도를 조절해본 예제

$('p.b').toggle('slow');    // 느리게 동작

$('p.b').toggle('fast'); 	// 빠르게 동작(그래도 인자가 아예 없는 상태보단 느림)

$('p.b').toggle(5000); 		// 5초에 걸쳐 펼쳐지고 접혀지는

접혀지고 펼쳐지는 속도를 조절 + 동작을 마친후 호출될 함수 정의

* 뒤에 선언된 function은 펼쳐지거나 접혀지는 동작이 다 끝난 다음에나 실행됨


$('button:last').click(function(){
	$('span:last').toggle(3000,function(){
		alert(1);                          
	});
});

맨 위의것 동일코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex07_toggleClass_toggle.html</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">
.redPink {
	color: Red;
	background-color: Pink;
}

.blueYellow {
	color: Blue;
	background-color: Yellow;
}

.under{
	text-decoration: underline;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('button').click(function(){
			$('#myToggle li').toggle(); 
		});
	});
</script>
</head>
<body>
	<h1>toggle 함수 사용하기 실습</h1>
	<ul id="myToggle">
		<li><h2>EXO</h2></li>
		<li><h2>방탄소년단</h2></li>
		<li><h2>워너원</h2></li>
	</ul>
	<hr>

	<h1>toggleClass 사용하기 실습</h1>
	<ul id="yourToggle">
		<li><h2>소녀시대</h2></li>
		<li><h2>걸스데이</h2></li>
		<li><h2>시크릿</h2></li>
	</ul>
	
	<button>버튼</button>
</body>
</html>

저작자표시 (새창열림)