[jQuery] .slideToggle()로 객체를 말아올리거나 서서히 펼치는 예제

  jQuery의 .slideToggle()은 객체를 말아올리거나 펼치는 효과를 낸다. .slideToggle()의 형식은 아래와 같다.

.slideToggle( [움직임 시간(duration)] [, 움직이고 나서 실행할 함수(callback)] )
.slideToggle( [움직임 시간(duration)] [, 늦춤 함수(easing)] [, 움직이고 나서 실행할 함수(callback)] )

  움직임 시간은 밀리초(ms) 단위로 넣거나 slow, normal, fast를 쓸 수 있다. 아래는 jQuery로 단추(button)를 딸깍하면 상자(div)가 펼쳐져 있으면 말아올려서 접고, 접혀 있으면 천천히 펼쳐내리는 예제이다.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>

<body>
<button id="click_button">딸깍해 보세요</button>
<div style="width: 125px; background-color: rgb(90, 200, 220);" id="button_content">말아올리고 말아내리는 글상자</div>
<script type="text/javascript">
$('#click_button').click(function() {
$('#button_content').slideToggle('slow', function() {
// 객체가 다 펼치지거나 접히고 나면 여기에 든 내용이 실행된다.
});
});
</script>
</body>
</html>

<미리보기>

말아올리고 말아내리는 글상자

  단추로 쓸 객체를 button 태그 대신 span이나 div로 바꾸어도 된다. 접거나 펼치는 시간은 slow가 600밀리초, fast는 200밀리초이다.

글 걸기 주소 : 이 글에는 글을 걸 수 없습니다.

덧글을 달아 주세요