2021-05-01
제이쿼리 문법으로 마치 2 Depth 구조와 같은 느낌을 줄 수 있는 슬라이드 effect 함수가 존재하는데, 이 함수의 사용법을 알아보자.
- slideDown() / slideUp()
slideDown() / slideUp() 이 두 함수는 단순 슬라이드를 내리고 올리는 기능만 가능하다. 때문에 보통은 잘 사용되지 않고 올리고 내리는 두 가지 기능이 모두 되는 slideToggle이 사용되는 경우가 많다.
- slideToggle()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").click(function(){
$("#slide").slideToggle("slow");
})
})
</script>
<style type="text/css">
div{
width: 400px;
height: 200px;
background-color: tomato;
border: 2px solid green;
}
#slide{
display:none;
}
</style>
</head>
<body>
<div id="div1">Hello</div>
<div id="slide">Hello Hello</div>
</body>
</html>
예제 코드는 아래와 같으며, 최초 접속시에는 아래와 같은 화면이 나타난다. slideToggle()은 현재 div1 태그가 클릭 시에 발생되도록 걸어두었으며, 아래의 Hello div 영역을 클릭하면 동작하게 된다.
아래는 클릭시 동작되는 화면이다. 기존의 div 아래 새로운 div가 천천히 나타나게 된다. 이후 다시 클릭해주면 원래의 Hello 한 개만 있는 화면으로 돌아가게 된다.
메인 이미지 출처: Photo by Zidhan Ibrahim on Unsplash