jQuery animate

yeong ·2022년 11월 25일
목록 보기
20/20

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<style type="text/css">
#box {
	width: 150px;
	height: 150px;
	background: orange;
	margin-bottom: 20px;
	position: relative;
	top: 0;
	left: 0;
}
</style>
</head>
<body>
	<h1>Effect - Animate</h1>
	<hr>
	<select id="easing">
		<option>linear</option>
		<option>easeInCubic</option>
		<option>easeOutCubic</option>
		<option>easeInBack</option>
		<option>easeOutBack</option>
		<option>easeInElastic</option>
		<option>easeOutElastic</option>
	</select>
	<hr>
	<div id="box"></div>
	<button type="button" id="left">◀</button>
	<button type="button" id="right">▶</button>
	
	<script type="text/javascript">
	//선택자로 검색된 태그를 비활성화 처리
	$("#left").attr("disabled", "disabled");
	
	$("#left").click(function() {
		//select 태그의 자식태그(option 태그) 중 선택된 태그의 태그내용을 반환받아 변수에 저장 
		var easing=$("#easing").children(":selected").text();
		
		$("#left").attr("disabled", "disabled");
		//$(selector).removeAttr(name) : 선택자로 검색된 태그의 태그속성을 제거하는 메소드
		$("#right").removeAttr("disabled");
		
		//$(selector).animate(properties, duration[, easing][, callback]) : 선택자로 검색된 
		//태그에 애니메이션 효과를 제공하는 메소드
		// => properties : 태그의 CSS 스타일 속성과 속성값을 Object 객체의 요소로 표현하여 전달
		// => duration : 애니메이션 효과의 적용시간(ms) 전달
		// => easing : 애니메이션 효과의 적용속도 전달 - https://easings.net 사이트 참조 >> jquery-ui 라이브러리 필요 
		// => callback : 애니메이션 효과 적용 후 실행될 명령이 작성된 함수 전달
		//$(selector).stop() : 선택자로 검색된 태그에 적용된 애니메이션 효과를 중지하는 메소드
		$("#box").stop().animate({"left":0}, 3000, easing);
	});
	
	$("#right").click(function() {
		var easing=$("#easing").children(":selected").text();

		$("#right").attr("disabled", "disabled");
		$("#left").removeAttr("disabled");

		//$(selector).width() : 선택자로 검색된 태그의 폭을 반환하는 메소드
		$("#box").stop().animate({"left":$(window).width()-170}, 3000, easing);
	});
	
	</script>
</body>
</html>
yeong
이전 포스트
jQuery animate

jquery

jQuery - hide show

0개의 댓글
