jQuery animate() feat.easing
2021. 12. 8. 10:17ㆍStudy/jQuery
animate();
- CSS로도 간단한 애니메이션 효과를 넣을 수 있지만, jQuery를 활용하면 보다 더 다양한 애니메이션 구현이 가능하다,
- Tween 효과를 생성해 준다. (중간 단계 행성)
사용 형식
아래와 같이 필요에 의해 4가지 형식으로 사용할 수 있다.
$(selector).animate(object);
$(selector).animate(object, speed);
$(selector).animate(object, speed, callback);
$(selector).animate(object, speed, easing, callback);
＊ object : 속성
＊ speed : slow, normal, fast, 1000... (기본 normal)
＊ callback : function
＊ easing : 애니메이션 속도 속성 (기본 linear)
$('.box img').animate({left:500, opacity:0.5, width:150, height:150}, 'slow');
// callback
$('.box img').animate({left: 500, opacity:0.5, width:150, height:150}, '2000', function(){
console.log('애니메이션 효과가 처리 되었습니다.');
});
//easing : jquery.easing 파일 내에 펑션 이름을 입력해준다.
$('.box img').animate({left:500, opacity:0.5, width:150, height:150}, 'slow', 'easeOutBounce');
easing 참고 :)
더보기
Easing | jQuery UI
Easing Apply an easing equation to an animation. All easings provided by jQuery UI are drawn above, using an HTML canvas element. Click a diagram to see the easing in action. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
jqueryui.com
jquery.easing.1.3.js
0.01MB
object에 사용 가능한 속성
CSS transition과는 달리 object에 쓸 수 있는 속성이 정해져 있다.
| top, left, right, bottom | 위치 이동 ( ＊ position 속성이 지정되어 있어야 한다) |
| width, height | 크기 조절 |
| opacity | 투명도 조절 |
| margin, padding | 간격/여백 조절 |
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animate</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6; margin: 20px;}
a{color:inherit; text-decoration:none;}
img{vertical-align:top;}
.box img{width:300px; height:300px; position:relative;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery-migrate-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$('.box img').toggle(function () {
$(this).animate({
left: 500, opacity:0.5, width:150, height:150
}, 'slow');
}, function () {
$(this).animate({
left: 0, opacity:1, width:300, height:300
}, 'slow');
});
});
</script>
</head>
<body>
<div class="box"><img src="./images/img1.jpg" alt=""></div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery animate hover slide (0) | 2021.12.08 |
|---|---|
| jQuery ex animate (0) | 2021.12.08 |
| jQuery 간단 갤러리 index (0) | 2021.12.07 |
| jQuery 시각효과 (0) | 2021.12.07 |
| jQuery EVENT Bubbling , this (0) | 2021.12.07 |
