목차
- slideToggle() 예제 - 미끄러지듯이 (보이기/숨기기) 상호전환
- slideToggle() 정의
- slideToggle() 구문
- slideToggle() 예제 - speed 매개변수 사용
- slideToggle() 예제 - callback 매개변수 사용
- slideToggle() 예제 - 토글 메뉴
- slideToggle() 예제 - 여백 클릭 시 닫히는 토글 메뉴
slideToggle() 예제 - 미끄러지듯이 (보이기/숨기기) 상호전환
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<button>slideToggle</button>
결과보기
slideToggle() 정의
선택요소를 부드럽게 보이기/숨기기 상호전환.
즉, slideUp() 메서드와 slideDown() 메서드 상호전환.
선택요소의 가시성 확인 후, 자동으로 그 반대로 작동함.
즉,
현재, 숨김 상태면 slideDown() 실행됨.
현재, 보임 상태면 slideUp() 실행됨.
slideToggle() 구문
$(selector).slideToggle(speed,easing,callback)
[매개변수]
speed
선택. 동작 완료에 걸리는 시간. (기본값: 400)
3가지료 표현 가능. (※ slow, fast 적을 땐 따옴표로 묶음.)
- "slow"
- "fast"
- 1/1000 초 (= 밀리초). (1초 = 1000)
easing
선택. 속도 변경 방법. (기본값: swing) ※ 가능값은 아래와 같음.
- swing : 시작/끝은 더 느리게. 중간에선 더 빠르게. (기본값)
- linear : 똑같은 속도 유지.
- ※ 그외도 많은데, 이건 구글링. ㅡㅡ;
callback
선택. 동작 완료 후, 실행시킬 함수. (= 콜백함수)
slideToggle() 예제 - speed 매개변수 사용
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle(1000);
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<button>slideToggle</button>
결과보기
slideToggle() 예제 - callback 매개변수 사용
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle(1000, function(){
alert("slideToggle() 완료.");
});
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<button>slideToggle</button>
결과보기
slideToggle() 예제 - 토글 메뉴
[CSS]
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 25px;
background-color: #333333;
color: #D7DADB;
margin: 0;
}
h1 {
color: #FFFFFF;
}
.content {
margin-top: 20px;
padding: 0 10px;
}
/* 메뉴 스타일 */
#menu-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#menu-bar {
display: block;
width: 100%;
height: 10px;
background-color: #FC4349;
}
#menu-tab {
background-color: #FC4349;
cursor: pointer;
float: right;
padding: 5px 10px;
border-radius: 0 0 5px 5px;
}
#menu-nav {
display: none;
padding: 5px 10px;
background-color: #FC4349;
color: #333333;
}
#menu-nav ul {
list-style: none;
margin: 20px 0 30px;
padding: 0;
}
#menu-nav ul li{
padding: 10px;
border-bottom: 1px solid #E03C41;
cursor: pointer;
text-align: center;
}
#menu-nav ul li:first-child{
border-top: 1px solid #E03C41;
}
#menu-nav ul li:hover{
background-color: #EB3E44;
}
</style>
[JS]
<script src="https://homzzang.com/asset/jquery-1.12.0/jquery.min.js?1491831927" ></script>
<script>
$(document).on('click', '#menu-tab', function () {
$('#menu-nav').slideToggle('slow');
});
</script>
[HTML]
<div id="menu-wrapper">
<div id="menu-bar"></div>
<div id="menu-nav">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>
</div>
<div id="menu-tab" class="closed">메뉴</div>
</div>
<div class="content">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
결과보기
slideToggle() 예제 - 여백 클릭 시 닫히는 토글 메뉴
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
#show_btn{width:300px; margin:0 auto; cursor:pointer; text-align:center; padding:10px; border-radius:5px; border:1px solid silver}
#menubox{width:100%;height:30%; background:red; display:none; position:absolute; color:#fff; z-index:99999; text-align:center; margin:0px auto}
</style>
<div id="show_btn">메뉴보기</div>
<div id="menubox">메뉴코드</div>
<script>
$(document).ready(function(){
$('#show_btn').click(function(event){
event.stopPropagation();
$("#menubox").slideToggle("slow");
});
$("#menubox").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$("#menubox").hide();
});
</script>
결과보기
정필성 님 (200211) https://sir.kr/g5_tip/12771
