이번에는 천천히 스스륵~ 열리고 닫히는 슬라이드 기능을 제이쿼리로 해 보자구.
자바스크립트에서는 이 기능을 구현하려고 꽤 긴 코드와 설명이 필요했어.
그런데 제이쿼리는 이미 다 만들어 둔 함수를 쓰는 것이기 때문에 별로 설명할게 없어.
그냥 함수 이름만 알면 돼.
slideUP( ), slideDown( ), slideToggle( )
이름 만 봐도 어떤 기능인지 알겠지?
데모용 코드도 세가지 기능 한꺼번에 다 넣어 보았어.
...
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<div class="menu">
<div>
<span style="font-size:20px">알찬만두</span>
<button style="float:right" onclick="$('#subMenu').slideToggle()">slideToggle</button>
<button style="float:right" onclick="$('#subMenu').slideUp()">slideUp</button>
<button style="float:right" onclick="$('#subMenu').slideDown()">slideDown</button>
</div>
<div id="subMenu" style="display:none;">
<hr>
<ul>
<li><a href="#">만두소개</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</div>
</div>
더 설명을 하려고 해도 할게 없네...ㅎ
위 코드를 이용한 데모 화면은 아래 링크에 걸어 둘께...
http://yogibbs.kr/jsDemo/slideUpDown-jquery.html
아~ 하나 있다..ㅎ
슬라이딩 시간은 함수의 괄호( ) 안에 숫자를 넣으면 돼. (1000 = 1초)
아무 숫자도 넣지 않으면 기본값인 400 (0.4초)의 속도록 열리고 닫혀.
slideToggle( ) 에서 열리고 닫히는 시간을 3초로 천천히 하려면..
slideToggle(3000)
참 "slow" "fast" 라고 입력해도 돼..
slideToggle("slow")