애니메이션을 이용하여 fadein fadeout 효과를 줄 수 있다.
fadeIn(duration, ease function) 서서히 나타남
fadeOut(duration, ease function) 서서히 사라짐
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>easing fadein fadeout</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="../../js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
$("#fadein").click(function(){
$("#target").fadeIn(6000,"easeInQuint" ,function(){
alert("show complete");
});
});
$("#fadeout").click(function(){
$("#target").fadeOut(6000,"easeOutQuint" ,function(){
alert("hide complete");
});
});
});
</script>
</head>
<body>
<div>
<button id="fadein">show</button>
<button id="fadeout">hide</button>
</div>
<br><br>
<div id="target" style="display: none;">
<img src="../../images/1.png">
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 애니메이션 사용하기(animate option) (0) | 2020.08.07 |
|---|---|
| [Javascript] 애니메이션 사용하기(slideDown, slideUp) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(ease 함수 이용하기) (0) | 2020.08.07 |
| [Javascirpt] 애니메이션 사용하기(show, hide) (0) | 2020.08.07 |
| [Javascript] 이미지 드래그 하기(mousedown, mousemove, mouseup) (0) | 2020.08.07 |
