7.0 저수준 애니메이션 메서드와 정의된 효과를 가지고 있다.
- 토글 방식으로 요소를 보여주고 숨기기
- 크기 조절과 동시에 요소를 페이드 인/아웃 하기
- 슬라이드 업 또는 슬라이드 다운 그리고 토글하기
- 페이드 인과 페이드 아웃 그리고 투명도 지정
미리 정의 된 메서드 같은 경우 속도와 후에 실행될 콜백 함수도 지원한다.
1. Animate 메서드
animate 메서드를 사용하면
1.1 css속성(숫자값)제어
1.2 scrollTop, scrollLeft DOM속성을 제어 (요소의 overflow시)
1.3 종점 값을 위해 css의 계측 단위인 pixel, em, inche, %사용가능
1.4 요소의 현재 상태에 대한 상대값 또는 고정값으로 효과의 종점 지정
1.5 상태를 전환하기 위한 값으로 toggle을 사용할 수 있다. (opacity:toggle)
1.6 애니메이션에 이징(easing)메서드를 지정할 수 있다
1.7 애니매이션을 큐에 넣거나 혹은 동시에 실행 하도록 지정 할 수 있다.
// 애니메이션 속성은 카멜 표기법 사용 margin-left => marginLeft를 사용해야한다.
2. 애니메이션 속도
speed매개변수는 밀리초 혹은 미리 정의된 문자열 지정가능
2.1 slow는 600밀리 초를 의미한다.
2.2 fast는 200밀리 초를 의미한다.
//명시적 정의가 없을시 기본 값인 400밀리 초로 애니메이션이 동작한다.
이벤트 템플릿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:www.w3.org/TR/xhtml1/DTD/xhtml1-ransitional.dtd">
<html>
<head>
<title>Chapter 6</title>
<link rel="stylesheet" href="chapter6.css" type="text/css" />
<script src="script/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body id="single">
<input type="button" id="animate" value="animate"/>
<div class="box">
<p> Lorem ipsum dolor ist amet consecteutr adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
7.1 요소를 슬라이딩 및 페이딩 하기
7.1.1 단순 보이기
$(document).ready(function() {
$('#animate').click(function (){
$('.box').show();
});
);
간단히 토글
$('.box').toggle();
7.1.2 슬라이드
$(document).ready(function () {
$('#animate').clickk(function() {
$('.box').slideToggle('slow');
});
});
7.1.3 페이드
$(document).ready(function(){
$('#animate').click(function() {
var $box = $('.box');
if($box.is(':visible')){
$box.fadeOut('slow');
}else {
$box.fadeIn('slow');
}
});
});
토글형식
$(document).ready(function(){
$('#animate').click(function() {
$('.box;).fadeTo('slow','toggle');
}
});
});
유지보수에 좋은 animate메서드
$(document).ready(function(){
$('#animate').click(function() {
$('.box;).animate({opacity : 'toggle' }, 'slow');
}
});
});
혼합방식 ( opacity에 height도 토글하기 위한 함수 :: 페이드와 동시에 슬라이드 )
$(document).ready(function(){
$('#animate').click(function() {
$('.box;).animate({
opacity : 'toggle' ,
height :'toggle'
}, 'slow');
}
});
});
# Slide 메서드
slideUp, slideDown, slideToggle
# Fade 메서드
fadeIn, fadeOut, fadeTo
//fadeTo보다는 animate를 사용하는게 가독성면에서 훨씬 좋다
7.2 위쪽으로 슬라이드 하면서 요소를 보이게 하기
// HTML
animation요소를 <div>로 감싸고 이것의 position:relative로 설정하여 보편적으로 동작하게끔 설정한다.
<div class = "box" >
<div id = "revealUp">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
// CSS
.box{ position: relative; } //상대위치
#revealUp{
position: absolute; //절대위치
overflow: hidden;
display: none;
bottom: 0;
background-color: #c00;
height: 0;
}
//jQuery
$(document).ready(fucntion() {
$('#animate').click(function () {
var $box = $('#revealUp');
if($box.height() >0){
$box.animate({ height : 0 });
} else {
$box.animate({ height : '100%' });
}
});
});
7.3 수평 아코디언 만들기
7.4 동시에 요소를 슬라이딩 하고 페이딩하기
7.5 순차적인 효과 적용하기
7.6 요소들이 현재 애니메이션 중인지 알아내기
7.7 애니메이션 종료 및 리셋하기
7.8 효과에 사용자 정의, 이징(Easing)메서드 사용하기
7.9 모든 효과를 동작하지 않게 하기
7.10 고급 효과를 위해 jQuery UI사용하기