반응형
.slideToggle() 이란?
.slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다.
문법
.slideToggle( [duration ] [, easing ] [, complete ] )
duration
- 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다.
- fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다.
easing
- 요소가 나타나거나 사라지는 방식을 정합니다.
- swing과 linear가 가능하며, 기본값은 swing입니다.
complete
요소가 나타나거나 사라진 후 수행할 작업을 정합니다.
예시 1
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.b { height: 100px; background-color: #bbdefb; }
</style>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button.a' ).click( function() {
$( '.b' ).slideToggle( 600, 'linear', function() {
alert( 'Toggled' );
} );
} );
} );
</script>
</head>
<body>
<p><button class="a">Click</button></p>
<div class="b"></div>
</body>
</html>
예시 2
<script>
function calander_toggle(){
$('#calendar').slideToggle();
}
</script>
<span><img src="img/icon_arrow_down.png" style="padding: 6px; cursor: pointer;" onclick="calander_toggle()"></span>
<div id="calendar"></div>반응형
'Java' 카테고리의 다른 글
| [라이브러리] FullCalendar 사용하기 (0) | 2022.06.03 |
|---|---|
| [js] 페이지 이동하기, 새 창 띄우기 (0) | 2022.06.03 |
| [라이브러리] Datepicker (0) | 2022.06.03 |
| [SQL] Index 문법 (0) | 2022.05.31 |
| SlowQuery 해결하기 (0) | 2022.05.31 |
