애니메이션을 실행할 때 여러가지 옵션을 갖고 표시할 수 있다.
progress라는 곳에서 여러가지 옵션을 확인할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animate option</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="../../js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
var $img1 = $("#img1");
$("#btn").click(function () {
$img1.hide({
easing: "easeInBounce",
duration: 6000,
progress: function (animation, progress, remainMs) {
var percent = parseInt(progress * 100); // 진행률을 백분율로 변환
var time = (remainMs / 100).toFixed(2);
var opacity = parseFloat($img1.css("opacity")).toFixed(2); // 현재의 이미지 투명도
var output = "진행률 : " + percent + "<br>남은 시간 : " + time + "<br>투명도 : " + opacity;
$("#info").html(output);
}
});
});
});
</script>
</head>
<body>
<button id="btn">hide image</button>
<div id="info">
</div>
<br>
<div id="target">
<img src="../../images/1.png" id="img1">
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 배너 이동하기(애니메이션 사용) (0) | 2020.08.07 |
|---|---|
| [Javascript] 애니메이션 사용하기(사용자 제어) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(slideDown, slideUp) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(fadeIn, fadeOut) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(ease 함수 이용하기) (0) | 2020.08.07 |
