728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220426/animate1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>컴포넌트 이동하기1</title>
<style type="text/css">
div {
width : 50px;
height : 50px;
background-color : orange;
position : relative;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("div").hover(function(){
//$(this) : 현재 마우스커서를 가지고 있는 div 태그
//animate() : 태그 이동 함수
//{left:300} : 왼쪽으로 300까지 이동
//'slow' : 천천히 이동 (이동속도)
$(this).animate({left:300},'slow')
}, function() {
$(this).animate({left:0},'slow')
})
})
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery slideimg (setInterval) (0) | 2022.04.26 |
|---|---|
| [Jquery] 21. Jquery animate2 (id값주기) (0) | 2022.04.26 |
| [Jquery] 21. Jquery game (그림 맞추기 게임만들기) (0) | 2022.04.25 |
| [Jquery] 21. Jquery table ($(this).index(), $(this).parent().children().index(this), td:nth-of-type()) (0) | 2022.04.25 |
| [Jquery] 21. Jquery key1 (inputarr, <div id="card">) (0) | 2022.04.25 |