animate 효과
$(selector).animate(properties, duration[, easing][, callback])
: 선택자로 검색된 태그에 애니메이션 효과를 제공하는 메소드
→ properties : 태그의 CSS 스타일 속성과 속성값을 Object 객체의 요소로 전달
→ duration : 애니메이션 효과의 적용시간(ms) 전달 (태그 스타일이 변환되는 시간)
→ easing : 애니메이션 효과의 적응속도를 전달 - https://easings.net 사이트 참조
easing 기능을 사용하기 위해서는 jquery-ui 라이브러리가 필요하다. (download >> GoogleCDN >> jQuery UI)
→ callback : 애니메이션 효과 적용 후 실행될 명령이 작성된 함수
예시)
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/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>
</body>
</html>
[script 태그]
$("#left").attr("disabled", "disabled");//태그를 비활성화 처리
$("#left").click(function() {
//선택자로 검색된 태그(select 태그)의 자식태그(option 태그) 중 선택된 태그의 태그내용을
//반환받아 변수에 저장
var easing=$("#easing").children(":selected").text();
$("#left").attr("disabled", "disabled");//태그를 비활성화 처리
$("#right").removeAttr("disabled");//태그를 활성화 처리
//$(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);
});
$(selector).stop() : 선택자로 검색된 태그에 설정된 애니메이션 효과를 멈추는 메소드
$(selector).width() : 선택자로 검색된 태그의 폭을 반환하는 메소드
'학원 > 복기' 카테고리의 다른 글
| [Servlet] Servlet 프로그램 작성 방법 (0) | 2023.06.14 |
|---|---|
| [Servlet] Servlet이란? (0) | 2023.06.14 |
| [jQuery] hide 메소드와 show 메소드 / slideDown 메소드와 slideUp 메소드 / fadeIn 메소드와 fadeOut 메소드 / toggle 메소드 (0) | 2023.06.14 |
| [jQuery] checkbox 이벤트 (0) | 2023.06.14 |
| [jQuery] Form 이벤트 / Submit 이벤트 (0) | 2023.06.14 |
