.animate( )는 여러 CSS 스타일 속성을 이용해 새로운 이펙트 효과를 만들어준다.
[animate의 속성]
| properties | 이펙트 효과를 구성할 CSS 스타일 속성 |
| duration (default:400) | 이펙트 효과가 지속될 시간 |
| easing function (default:swing) | 이펙트 효과의 시간당 속도를 전달 |
| callback함수 | 이펙트 효과의 동작이 완료된 후에 실행할 함수 정의 |
1. HTML 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="javascript.js"></script>
<style>
div,img {
width:200px; height:200px;
position:absolute; /*absolute는 절대좌표라서 하나로 겹쳐지고, relative는 상대좌표라서 서로 떨어진다.*/
}
div {
background:pink;
text-align:center;
}
</style>
</head>
<body>
<div id="i1">
ANIMATE
</div>
<img src="../img/dog3.jpg" id="i2"/>
<img src="../img/dog4.jpg" id="i3"/>
</body>
</html>2.-1 js파일
- .animate( {옵션}, 이동시간 )
- 첫번째 매개변수로 json형식으로 된 옵션, 두 번째 매개변수로 이동시간(slow, fast, ms..)
$(()=>{
$("#i1").animate({marginLeft:"1000px" //(1)
,width:"500px" ,marginTop:"500px"
,opacity:0.3}, 5000) // 5초동안 옵션의 위치로 간다.
.animate({marginTop:"10px",opacity:1}, 3000); //(2)
});더보기
(1)번
(2)번
- 처음 시작할 때는 position:absolute이기 때문에 모든게 겹쳐져 있어서 보이지 않는다.
- .animate( ).animate( )로 무한대로 붙일 수 있다.
(1) 5초 동안 오른쪽 아래 대각선으로 이동하면서 크기가 500px만큼 되고 점점투명해진다.
(2) 3초동안 위쪽으로 이동하면서 투명해졌던 것이 다시 원래대로 돌아온다.
2.-2 js파일
$(()=>{
$("#i2").animate({marginLeft:"800px"}, 5000) // (1)
.animate({marginLeft:"0px", marginTop:"400px"},1000); // (2)
// 오른쪽 상단에서 왼쪽 대각선 하단으로
// 왼쪽 대각선으로 갈때는 1초이기 때문에 매우 빠름
});더보기
(1)
(2)
2.-3 js파일
- delay( ) : 애니메이션 출발 전 대기 시간 설정
$(()=>{
$("#i3").delay(3000).animate({marginLeft:"500px"
, marginTop:"500px"
, width:"500px" } );
});더보기
- 다른 객체가 이동하고나서 3초 뒤에 #i3이 움직인다. 이동시간을 적지 않으면 기본 0.4초로 이동한다.
- 오른쪽아래 대각선으로 이동하면서 폭이 500px이 된다.
2.-4 js파일
- stop( ) : 애니메이션 중지
$(()=>{
$("#i1, #i2, #i3").mouseover(function(){
$(this).stop(true);
});
// 위와 동일함
//$("#i1, #i2, #i3").mouseenter(function(){
// $(this).stop(true);
//});
});더보기
- .animate( ).animate( ) -> 이렇게 여러 animate가 있을 때는 stop(true)를 해줘야 모든 애니메이션이 중지된다.
- .animate( ) -> 애니메이션 함수가 한개만 있을 때는 stop( ) 이렇게만 해줘도 된다.
'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글
| 프론트엔드6-2. [jquery 예제] jquery를 이용해서 글자 크기 변경 (0) | 2022.02.17 |
|---|---|
| 프론트엔드6-1. [jquery 예제] 영화포스터 움직이는 바 만들기-2 (0) | 2022.02.17 |
| 프론트엔드5-9. jquery의 effect(숨김,표시)slide, fade (0) | 2022.02.16 |
| 프론트엔드5-8. jquery trigger() (0) | 2022.02.16 |
| 프론트엔드5-7. jquery 이벤트 처리하기(onxx)와 hover (0) | 2022.02.16 |
