jQuery | javascript | CSS

51.jQuery - slideToggle()로 지정된 영역 보이고 안보이게 하기 ( 08.Effects )

Godffs 2009. 11. 12. 18:02
반응형
SlideToggle (speed, callback) : 슬라이드 업/다운에 대한 토글링

04.SlideToggle.htm

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

<head>

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

    <style type="text/css">

    </style>

   

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

    <script type="text/javascript">

        $(document).ready(function() {

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

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

                $("#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>


결과화면

[그림51-1]



반응형