애니메이션을 실행하면서 중간에 중지하는 사용자제어를 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>user defined animation</title>
<style>
#block {
width: 10%;
height: 100px;
background-color: chartreuse;
}
</style>
<script src="../../js/jquery.easing.1.3.js"></script>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#block").animate({
width: "100%"
}, 6000)
});
$("#btnStop").click(function(){
$("#block").stop();
});
});
</script>
</head>
<body>
<div>
<button id="btn">start</button>
<button id="btnStop">stop</button>
</div>
<br>
<div id="block">
</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 |
