Effects - SlideToggle() 메서드 (슬라이드 업/다운)

by 조쉬 posted Oct 16, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

가 크게 작게 위로 아래로 댓글로 가기 인쇄



[SlideToggle.htm]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>슬라이드 업/다운</title>

    <style type="text/css">

        #my .hover {

            cursor:pointer;

            background-color:Yellow;

    </style>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#btn").click(function () {

                //[!] 숨김->보임->숨김

                $("#first").slideToggle('slow');

            });

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="슬라이드 토글" />

<div id="first" style="display:none;background-color:Yellow;height:100px;">

첫번째 영역

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. '슬라이드 토글'버튼을 누르기 전...





--> '슬라이드 토글'버튼을 누른 후 화면. 




--> '슬라이드 토글'버튼을 다시 눌렀을 때의 화면. (버튼을 누를때 마다 '슬라이드 업/슬라이드 다운'이 반복된다(-> 토글)).






위로 아래로 댓글로 가기 인쇄