지정한 위치로 물고기 이동시키는 것을 부드럽게 표현해보자.
animate 선언하기 전에 stop()을 추가하면 애니메이션 실행 중에 그 다음 애니메이션을 바로 실행할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#info {
border: 1px solid #cccccc;
width: 500px;
height: 50px;
margin: 30px;
}
#panel {
position: absolute;
border: 1px solid #cccccc;
width: 500px;
height: 300px;
margin: 0 30px 0 30px;
}
#fish {
position: absolute;
left: 0;
top: 0;
}
</style>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="../../js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
var $fish = $("#fish");
var $panel = $("#panel");
$("#panel").click(function (e) {
var output = "";
var panel_x = $panel.offset().left;
var panel_y = $panel.offset().top;
output += "클릭한 지역 위치(x, y) = " + e.clientX + ", " + e.clientY + "<br>";
output += "문서 기준 위치(x, y) = " + e.pageX + ", " + e.pageY;
$fish.stop().animate({ // stop()을 넣어주면 애니메이션 도중에 다른 애니메이션을 실행시킬 수 있다.
left: e.clientX - panel_x,
top: e.clientY - panel_y
}, 1000, "easeOutExpo");
$("#info").html(output);
}
);
});
</script>
</head>
<body>
<div id="info">
여기에 클릭한 위치 값 출력
</div>
<div id="panel">
<img src="../../images/fish1.png" id="fish">
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 배너 이동하기(애니메이션 사용) (0) | 2020.08.07 |
|---|---|
| [Javascript] 애니메이션 사용하기(사용자 제어) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(animate option) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(slideDown, slideUp) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(fadeIn, fadeOut) (0) | 2020.08.07 |
