기본 애니메이션을 위한 메서드(동적인 상태라는 것을 상기하자)
show() : 문서 객체가 커지게한다.
hide() : 문서 객체가 사라지게한다.
toggle() : show()와 hide()메서드를 번갈아 가며 실행
slideUp() : 문서 객체가 슬라이드 효과와 함께 위로 접힘
slideDown() : 문서 객체가 슬라이드 효과와 함께 아래로 펼쳐짐
slideToggle() : slideDown()과 slideUp()메서드를 번갈아 실행
fadeIn() : 문서 객체를 선명하게 보여줌
fadeOut() : 문서 객체를 사라지게 함
fadeToggle() : fadeIn()과 fadeOut()메서드를 번갈아 실행
메서드 사용 형태
1. $(selector).method();
2. $(selector).method(speed);
3. $(selector).method(speed, callback);
4. $(selector).method(speed, easing, callback);
speed : 애니메이션을 진행할 속도 지정(밀리초 단위의 숫자 또는 "slow", "normal", "fast" 입력)
callback : 애니메이션을 모두 완료한 후 실행할 함수를 지정
easing : 애니메이션을 미묘하게 변화시킬 함수를 지정
사용자 정의 애니메이션
1. $(selector).animate(object);
2. $(selector).animate(object, speed);
3. $(selector).animate(object, speed, easing);
4. $(selector).animate(object, speed, easing, callback);
-object 속성종류
opacity, top, left, right, bottom, top, width, margin, padding
애니메이션 사용에 많은 예가 있다. 그 중 이미지를 클릭하면 순차적으로 이미지가 바뀌는 애니메이션 예를 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Change Images</title>
<style type="text/css">
.image {
position: absolute;
top: 10px;
left: 10px;
}
.image img{
width: 300px;
height: 380px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").hide();
$("img:first").show();
$("img").click(function(){
$(this).each(function(){
//alert(this.src);
if(this == $("img:last").get(0)){
$("img:first").fadeIn("slow");
$(this).hide();
}else{
$(this).parent().next().children().fadeIn("slow");
$(this).hide();
}
})
})
})
</script>
</head>
<body>
<a class="image"><img src="../script/images/bg14.jpg"/></a>
<a class="image"><img src="../script/images/bg15.jpg"/></a>
<a class="image"><img src="../script/images/bg16.jpg"/></a>
<a class="image"><img src="../script/images/bg17.jpg"/></a>
<a class="image"><img src="../script/images/bg18.jpg"/></a>
</body>
</html>
댓글 없음:
댓글 쓰기