잡동사니에도 사랑을

[21.10.15] exam05(05_jQueryAnimation) 본문

JAVA_EE/JQuery

[21.10.15] exam05(05_jQueryAnimation)

luvforjunk 2021. 10. 15. 12:21
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#box {
	background: #98bf21;
	height: 100px;
	width: 100px;
	position: absolute; /* 부모 div 영역 밖으로 밀려 나간다 */
	left: 0;
}
</style>
</head>
<body>
	<h1>Animate</h1>
	<button>Reset</button>
	<button>Ani1</button>
	<button>Ani2</button>
	<button>Ani3</button>
	<button>Ani4</button>
	<div id="animation-area" style="border: 1px solid red;">
		<div id="box"></div>
	</div>
	
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button:eq(0)").click(function(){
		$("#animation-area").html("<div id='box'></div>");
	});
	
	/* 좌측으로부터 250px만큼 div값을 이동 */
	$("button:eq(1)").click(function(){
		//CSS속성은 JSON형식으로 표현된다.
		$("#box").animate({
			'left': '250px'
		}, 1000, 'swing', function(){
			alert("애니메이션이 종료되었습니다.");
		});
	});
	
	/* 좌측으로부터 250px 이동하고, 높이와 너비를 150px에 하라! */
	$("button:eq(2)").click(function(){
		// JSON형식의 CSS 속성을 여러 개 나열할 수 있으며,
		// CSS속성을 제외한 나머지 파라미터들은 생략 가능하다.
		$("#box").animate({ /* 첫 번째 div는 position: static; 이므로 left속성 무시된다 */
			left: '250px',
			height: '150px',
			width: '150px'
	});
});
	
	/* 좌측으로부터 50px 이동하고, 높이와 넓이를 50px씩 크게 해라. */
	   $("button:eq(3)").click(function() {
	      // 단항연산자를 사용하여 기존의 값에서 점점 누적되는 형태로 변경이 가능하다.
	      $("div").animate({
	         left: '+=50px',
	         height: '+=50px',
	         width: '+=50px'
	      }, 300);
	   });

	
	/* 애니메이션의 연속적 호출 */
	$("button:eq(4)").click(function(){
		var div = $("#box");
		
		//애니메이션을 연속적으로 사용하면,
		// 여러 개의 장면이 순차적으로 실행된다
		div.animate({ height: '300px'}, 1000);
		div.animate({ width : '300px'}, 500);
		div.animate({ height : '100px'}, 800);
		div.animate({ width : '100px'}, 300);
		});
	});
</script>
</body>
</html>

<!-- 
animate() 함수를 사용한 CSS 속성의 애니메이션 처리
- 좀 더 다이나믹한 애니메이션을 구현할 수 있다.
- animate() 함수는 수치값을 지정하는 CSS 속성들을 제어하여 애니메이션 효과를 만들어 낸다.
- 구조
animate(properties [, duration][, easing][, complete])

① properties 
  - 움직임을 만들어 낼수 있는 CSS 속성들. json 형식으로 기술된다.
② duration
  - 애니메이션의 지속시간 설정
③ easing
  - 움직임에 변화를 줄 수 있는 속성. 
  - swing : 끝점에 가서 속도가 살짝 느려짐
  - linear : 균일한 속도 유지
④ complete
  - 움직임이 멈춘 후 실행될 속성. 
  - 움직임이 완료된 다음 이 속성에 지정된 함수가 실행된다.
 -->
728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.18] exam02(06_jQueryDOM) - 이미지 목록 클릭 시 클릭한 이미지 띄우기  (0) 2021.10.18
[21.10.18] exam01(06_jQueryDOM) - 문서 객체 모델(DOM, Document Object Model) 예제문  (0) 2021.10.18
[21.10.15] exam04(05_jQueryAnimation)  (0) 2021.10.15
[21.10.15] exam03(05_jQueryAnimation)  (0) 2021.10.15
[21.10.15] exam02(05_jQueryAnimation)  (0) 2021.10.15
'JAVA_EE/JQuery' Related Articles more