show / hide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<style>
div{ border: 1px solid black; }
.box,.control{
width: 200px;
height: 100px;
margin: auto;
text-align: center;
}
</style>
<script>
$(function(){
$("#show").on("click",function(){
$(".box").show(1000);
})
$("#hide").on("click",function(){
$(".box").hide(1000);
})
})
</script>
</head>
<body>
<div class="box">
</div>
<div class="control">
<button id="show">show</button>
<button id="hide">hide</button>
</div>
</body>
</html>1000 = 1초
애니메이션의 시간과 끝났을 때의 알림을 넣을 수 있다.
$("#show").on("click",function(){
$(".box").show(1000,function(){
alert("Show Complete")
});
})
$("#hide").on("click",function(){
$(".box").hide(1000,function(){
alert("Hide Complete")
});
})slideDown / slideUp
$("#show").on("click",function(){
$(".box").slideDown(1000,function(){
alert("Show Complete")
});
})
$("#hide").on("click",function(){
$(".box").slideUp(1000,function(){
alert("Hide Complete")
});
})fadeIn / fadeOut
$("#show").on("click",function(){
$(".box").fadeIn(1000,function(){
alert("Show Complete")
});
})
$("#hide").on("click",function(){
$(".box").fadeOut(1000,function(){
alert("Hide Complete")
});
})'디지털 컨버전스 > Java Script' 카테고리의 다른 글
| [JQuery] 채팅 박스 만들기 (0) | 2020.04.20 |
|---|---|
| [JQuery] 동적테이블 - 애니메이션 적용 (0) | 2020.04.20 |
| [JQuery] 동적 테이블 - 선택 삭제 (0) | 2020.04.20 |
| [JQuery] 선택자 (0) | 2020.04.20 |
| [JQuery] JQuery의 배열에 기능 적용 (0) | 2020.04.20 |