jQuery animate rotate (feat.CSS)
2021. 12. 8. 11:56ㆍStudy/jQuery
animate rotate
jQuery는 rotate 속성을 기본으로 제공하진 않지만, jQUeryRotate를 연결시켜 사용할 수 있다.
또는 CSS transition과 함께 사용할 수 있다. (class 추가, 제거)
jQueryRotate 사용
파일을 추가로 링크시켜야 하기 때문에 CSS transition과 함께 사용하는것이 좋다.
<!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;}
</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 src="./js/jQueryRotate.2.2.js"></script>
<script>
$(document).ready(function(){
$(".cd1").rotate({
bind: {
mouseover : function() { $(this).rotate({animateTo:180})},
mouseout : function() { $(this).rotate({animateTo:0})}
}
});
});
</script>
</head>
<body>
<img class="cd1" src="images/cd1.png" alt="" >
</body>
</html>
CSS transition과 함께 사용하는것이 좋다.
addClass(), removeClass()를 사용해준다.
<!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;}
.cd1{transition:all .3s}
.cd1.on{transform:rotate(360deg) scale(.8); opacity: .8;}
.p1{font-size: 30px; color:red; background:greenyellow; width: 430px; text-align:center; transition:all .5s;}
.p1.on{font-size:50px; font-weight: bold; background:#black; color:yellow; box-shadow:10px 10px 10px 10px rgba(0,0,0,0.5); border-radius:15px;}
</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(){
$('.cd1').hover(function(){
$(this).addClass('on');
}, function(){
$(this).removeClass('on');
});
$('.p1').toggle(function(){
$(this).addClass('on');
}, function(){
$(this).removeClass('on');
});
});
</script>
</head>
<body>
<img class="cd1" src="images/cd1.png" alt="">
<p class="p1">단락요소 입니다.</p>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery node(DOM) 선택자 (0) | 2021.12.08 |
|---|---|
| jQuery 선택 리스트 박스 (Family Site) (0) | 2021.12.08 |
| jQuery animate caption (0) | 2021.12.08 |
| jQuery animate hover slide (0) | 2021.12.08 |
| jQuery ex animate (0) | 2021.12.08 |
