반응형
< !DOCTYPE html >
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$('div').slideToggle(1000)
});
});
</script>
</head>
<body>
<button>Click to slide up/down div</button><br><br>
<div style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>
slideToggle을 이용한 div의 모습 변화를 관찰해보자.
sildeToggle의 인자에는 slideToggle(토글이 일어나는 시간, 콜백함수)이다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#content, #content2, #slider {
padding: 5px;
text-align: center;
background-color: #c2c2c2;
border: solid 1px #c3c3c3;
border-radius: 5px;
}
#content, #content2 {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="slider"> click me ! </div>
<div id="content"> hello world </div>
<div id="content2"> hello world2 </div>
<script>
$(document).ready(function(){
$('#slider').click(function(){
$('#content').slideToggle("slow",function(){
$('#content2').slideToggle(200);
});
});
});
</script>
</body>
</html>
slideUp, slideDown메서드 두개를 계속해서 이용하는 것이 slideToggle이다.
위의 jquery를 실행해보면 우선 content가 토글이되고난 후 콜백함수로 content2의 슬라이드가 toggle됨을 알 수 있다.
반응형
'Basic > Jquery' 카테고리의 다른 글
| Tistory 메뉴에서 구분자 만들기 (0) | 2019.11.08 |
|---|---|
| Jquery를 이용한 특정 href 속성을 가진 element 찾기 (0) | 2019.11.04 |
| Jquery attr 메서드를 쓸 때 조심할 점 (0) | 2019.09.18 |
| Jquery를 이용한 show, hide, toggle (0) | 2018.08.16 |
| Jquery를 이용한 ajax get post (0) | 2018.08.15 |