다연이네

[days02] 복습 - 1) 보이기/안보이기(~toggle) 2) 애니메이션(animate) 효과 본문

Web/jQuery

[days02] 복습 - 1) 보이기/안보이기(~toggle) 2) 애니메이션(animate) 효과

　다연　 2020. 12. 21. 19:37
반응형

show(속도) / hide(속도) / toggle(속도)
slideDown() / slideUp() / slideToggle() 
fadeIn() / fadeOut() / fadeToggle() 

 

 

 

 show(속도) / hide(속도) / toggle(속도) 

<body>
<button>Show/Hide/Toggle</button>
<div style="border:1px solid gray; padding: 5px;">Lorem ipsum dolor sit amet, consectetur adipisicing <br>
elit. Modi optio sint soluta nesciunt laboriosam eaque dicta <br>
repellat quis tempore debitis eos explicabo cumque molestiae <br>
provident dignissimos suscipit sapiente! Dicta odio?</div>
<script>
$(function() {
	
	$("div").hide(); // == display:none; 	기본값 : 500ms == "normal"
	$("button").click(function(event) {
		//$("div").show("slow"); // == display:block
							//slow == 600ms
							//fast == 400ms
		$("div").toggle();
	});
});
</script>
</body>

버튼 누르면 (효과 없이) 보이고 또 누르면 안보이고 반복한다.

 

 

 slideDown() / slideUp() / slideToggle()  

<body>
<button>Show/Hide/Toggle</button>
<div style="border:1px solid gray; padding: 5px;">Lorem ipsum dolor sit amet, consectetur adipisicing <br>
elit. Modi optio sint soluta nesciunt laboriosam eaque dicta <br>
repellat quis tempore debitis eos explicabo cumque molestiae <br>
provident dignissimos suscipit sapiente! Dicta odio?</div>
<script>
$(function() { 
	$("div").hide(); // == display:none; 	기본값 : 500ms == "normal"
	$("button").click(function(event) {
		//$("div").slideDown();
		$("div").slideToggle();
	});
});
</script>
</body>

버튼 누르면 div가 주르륵 내려온다. (한 번 더 누르면 주르륵 내려옴)

 

 fadeIn() / fadeOut() / fadeToggle() 

<body>
<button>Show/Hide/Toggle</button>
<div style="border:1px solid gray; padding: 5px;">Lorem ipsum dolor sit amet, consectetur adipisicing <br>
elit. Modi optio sint soluta nesciunt laboriosam eaque dicta <br>
repellat quis tempore debitis eos explicabo cumque molestiae <br>
provident dignissimos suscipit sapiente! Dicta odio?</div>
<script>
$(function() {
	$("button").click(function(event) {
		//$("div").fadeOut();
		$("div").fadeToggle();
	});
});
</script>
</body>

버튼 누르면 div가 스르륵 흐려지며 사라진다. (한 번 더 누르면 스르륵 나타남)

 

 

 

애니메이션 효과

 

1. $(선택자).animate(속성객체{}) 
2. $(선택자).animate(속성객체{}, 시간) 
3. $(선택자).animate(속성객체{}, 시간, 콜백함수)

<body>
<div id="demo"></div>
<script>

$("#demo").css({
	width: 100,
	height: 100,
	background: "red"
	})
	.animate({
		width: "100%",
		opacity: "0.5",		
	}, 1000);
    
</script>
</body>

 

 

 
<body>
<button>start</button>
<div id="demo"></div>

<script>
$("button").click(function(event) {

	   //amination 효과가 4개 => 순차적으로 대기열에 들어가짐
	   // 애니메이션 호출이 1개씩 차례로 one by one 실행
	   $("#demo").animate({height:'300px', opacity: "0.4"}, "slow");
	   $("#demo").animate({width:'300px', opacity: "0.8"}, "slow");
	   $("#demo").animate({height:'100px', opacity: "0.4"}, "slow");
	   $("#demo").animate({width:'100px', opacity: "0.8"}, "slow");
	  
});
</script>
</body>

 

 $(selector).stop(stopAll, gotoEnd) 메소드 

                  기본값 false false
- 애니메이션 효과가 끝나기 전에 중지하는 함수 : 슬라이딩, 페이딩 ... 등등 중지

2번 버튼을 누르면 숨겨진 div가 내려오고, 그 도중 1번 버튼을 누르면 내려오던 것이 멈춘다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
#panel, #flip{
	padding: 5px;
	font-size: 18px;
	text-align: center;
	background: #555;
	color: white;
	border: solid 1px #666;
	border-radius: 3px;
}
#panel{
	padding: 50px;
	display: none;
}
</style>
</head>
<body>
<button>stop(false, false)</button>
<div id="flip">click to slide down</div>
<div id="panel">Hello World!</div>
<script>
//$(selector).stop(stopAll, gotoEnd) 메소드
//						기본값 false false
// - 애니메이션 효과가 끝나기 전에 중지하는 함수 : 슬라이딩, 페이딩 ... 등등 중지


$(function() {
	$("#flip").click(function(event) {
		$("#panel").slideDown(5000); //5초동안 slideDown
	});
	$("button").click(function(event) {
		$("#panel").stop();
	})
});
</script>
</body>
</html>

 

 애니메이션 정지 메소드 : stop() / delay() 특정 시간만큼 정지 

stop( stopAll , gotoEnd )

 

1번 애니메이션 : div 박스 전체가 5초동안 오른쪽으로 움직이기

2번 애니메이션 : div 박스 내 문자열이 5초동안 3em만큼 커지기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<style>
div{
	background: #98BF21;
	height: 100px;
	width: 200px;
	position: absolute;
}
</style>
</head>
<body>
<button id="btn1">start</button>
<button id="btn2">stop</button>
<button id="btn3">stop all</button>
<button id="btn4">stop but finish</button>
<button id="btn5">false true</button>
<p></p>
<div>hello</div>

<script>

$("#btn1").click(function() {
	$("div").animate({left:100},5000);
	$("div").animate({fontSize:'3em'},5000);
});
$("#btn2").click(function() {
	$("div").stop(false,false); //stopAll, gotoEnd
	//진행중인 애니메이션만 멈추고 다음 애니메이션은 진행
});
$("#btn3").click(function() {
	$("div").stop(true, false); //stopAll: true 대기열의 애니메이션까지 모두 멈춤
});
$("#btn4").click(function() {
	$("div").stop(true, true); //현재 애니메이션 끝으로 가고, 대기열 애니메이션도 진행X
});
$("#btn5").click(function() {
	$("div").stop(false, true); //현재 애니메이션 끝으로 가고 대기열 애니메이션 진행
});
</script>
</body>
</html>

 

 

 

stopAll, gotoEnd를 체크박스로 설정하며 테스트할 수 있는 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(function() {
	var clearQueue = false;
	var gotoEnd = false;
	
	$("#clearQueue").change(function() {
		clearQueue = $(this).prop('checked');
	});
	$("#gotoEnd").change(function() {
		gotoEnd = $(this).prop('checked');
	});
	
	$("#stopButton").click(function() {
		$("#box").stop(clearQueue, gotoEnd);
	});
	
	//스타일 연결 
	$("#box").css({
		width: "100px",
		height: "100px",
		background: "red"
	});
	
	//타이머 연결 
	setInterval(function() {
		$("#box")
		.animate({
			width: "200px"
		}, 1000) //1초간 200px로 늘이기
		.delay(1000) //1초 쉬기
		.animate({
			width: "100px" 
		}, 1000); //1초간 100px로 줄이기
	}, 3000); //3초 간격 반복 (위 animation이 총 3초니까 계속 한다는 뜻)
});
</script>


</head>
<body>
<label>clearQueue</label>
<input id="clearQueue" type="checkbox" /> <!-- stopAll -->
<br>
<label>gotoEnd</label>
<input type="checkbox" id="gotoEnd" /> <!-- gotoEnd -->
<br>
<button id="stopButton">Stop</button>
<div id="box"></div>
</body>
</html>

 

반응형
저작자표시 비영리

'Web > jQuery' 카테고리의 다른 글

[days02] 복습 - 플러그인(plug-in)  (0) 2020.12.21
[days02] 복습 - 1) 프레임 애니메이션 / 2) 문서 객체 생성과 추가  (0) 2020.12.21
[days02] 복습 - on()/off() 이벤트 연결/제거  (0) 2020.12.21
[days02] 복습 - attr()  (0) 2020.12.21
[days02] 복습 - 1) 콜백함수 / 2) $.each()  (0) 2020.12.21
'Web/jQuery' Related Articles more
Comments