자바스크립트에서 애니메이션인 show와 hide를 이용하여 이미지를 나타내고 없애는 것을 해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$("#show").click(function(){
$("#target").show(1000, function(){
alert("show complete");
});
});
$("#hide").click(function(){
$("#target").hide(1000, function(){
alert("hide complete");
});
});
});
</script>
</head>
<body>
<div>
<button id="show">show</button>
<button id="hide">hide</button>
</div>
<br><br>
<div id="target" style="display: none;">
<img src="../../images/1.png">
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 애니메이션 사용하기(fadeIn, fadeOut) (0) | 2020.08.07 |
|---|---|
| [Javascript] 애니메이션 사용하기(ease 함수 이용하기) (0) | 2020.08.07 |
| [Javascript] 이미지 드래그 하기(mousedown, mousemove, mouseup) (0) | 2020.08.07 |
| [Javascript] 지정한 위치로 물고기 이동시키기 (0) | 2020.08.07 |
| [Javascript] 웹페이지에서 마우스 위치 표시하기 (0) | 2020.08.07 |
