slideDown(duration, ease function) : 이미지를 위에부터 아래로 나타낸다.
slideUp(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 slideup slidedown</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="../../js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
$("#show").click(function(){
$("#target").slideDown(3000,"easeInBounce" ,function(){
alert("show complete");
});
});
$("#hide").click(function(){
$("#target").slideUp(3000,"easeOutBounce" ,function(){
alert("hide complete");
});
});
});
</script>
</head>
<body>
<div>
<button id="show">slide donw</button>
<button id="hide">slide up</button>
</div>
<br><br>
<div id="target" style="display: block;">
<img src="../../images/1.png">
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 애니메이션 사용하기(사용자 제어) (0) | 2020.08.07 |
|---|---|
| [Javascript] 애니메이션 사용하기(animate option) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(fadeIn, fadeOut) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(ease 함수 이용하기) (0) | 2020.08.07 |
| [Javascirpt] 애니메이션 사용하기(show, hide) (0) | 2020.08.07 |
