jQuery ex animate
2021. 12. 8. 10:48ㆍStudy/jQuery
HTML, CSS로 애니메이션의 전 상황을 만들어 준 후, jQuery로 애니메이션을 만들어준다.
fadeTo();
투명도 애니메이션 메소드
$('선택자').fadeTo('slow', 1);
$('.text1').fadeTo('slow', 1);
delay();
애니메이션 딜레이(시간차)를 만들어 준다
$('선택자').delay(시간).animate(object, speed);
$('.ani').delay(1000).animate({top: 4}, 'slow');
예제 :)
<!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;}
#main{position:relative; width:700px; height:200px; background:url(images/back.jpg) 0 0 no-repeat; overflow:hidden;}
.ani{position:relative; left:270px; top:200px; width:400px; height:196px; background:url(images/ca.png) 0 0 no-repeat;}
.text1{position:absolute; left:-300px; top:100px; width:300px; font-family:"Times New Roman", Times, serif; font-size:36px; color:#CCC;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery-migrate-1.4.1.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
// // 자바스크립트
// function move1(){
// $('.ani').animate({top:4}, 'slow');
// };
// function move2(){
// $('.text1').animate({left:20}, 'slow');
// $('.text1').fadeTo('slow', 1);
// $('.text1').fadeto('slow', 0);
// $('.text1').fadeTo('slow', 1);
// //체이닝 기법 가능
// //$('.text1').animate({left:20}, 'slow').fadeTo('slow', 1).fadeto('slow', 0).fadeTo('slow', 1);
// };
// setTimeout(move1, 1000); // delay : 1초 후 실행
// setTimeout(move2, 2000); // delay : 2초 후 실행
// // setTimeout : n초 후 실행
// // setInterval : n초 마다 실행
// jQuery
// $('.text1').fadeTo('fast',0);
// $('.ani').delay(1000).animate({top: 4}, 'slow');
// $('.text1').delay(2000).animate({left:20}, 'slow');
// $('.text1').fadeTo('slow',1) ;
// $('.text1').fadeTo('slow',0) ;
// $('.text1').fadeTo('slow',1) ;
// jQuery 체이닝기법
$('.text1').fadeTo('fast',0);
$('.ani').delay(1000).animate({top: 4}, '1000', 'easeOutBounce');
$('.text1').delay(2000).animate({left:20}, 'slow').fadeTo('slow',1).fadeTo('slow',0).fadeTo('slow',1);
});
</script>
</head>
<body>
<div id="main">
<div class="ani"></div>
<p class="text1">JUSTICE FOR ALL</p>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery animate caption (0) | 2021.12.08 |
|---|---|
| jQuery animate hover slide (0) | 2021.12.08 |
| jQuery animate() feat.easing (0) | 2021.12.08 |
| jQuery 간단 갤러리 index (0) | 2021.12.07 |
| jQuery 시각효과 (0) | 2021.12.07 |
