jQuery | javascript | CSS

48.jQuery - show()와 hide로 숨기기 및 보이기 ( 08.Effects )

Godffs 2009. 11. 12. 17:20
반응형
show() : 요소 보이기
show(speed, callback) : 요소 보이기(스피드와 콜백함수 지정 가능)

hide() : 요소 숨기기
hide(speed, callback) : 요소 숨기기(스피드와 콜백함수 지정 가능)

01.ShowHide.htm

<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="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] 기본값 설정

            $(".region").show(); //region 영역 보이기

            $("#moreRegion").hide(); //more...숨기기

           

            //[2] more...클릭시 보이기 숨기기

            $("span.more").click(function() {

                //3000 : 3, 'slow', 'normal', 'fast'

                $("#moreRegion").show('3000'); //천천히 보이기

                $(this).hide('fast');//more버튼 숨기기

            });

        });

    </script>

</head>

 

<body>

    <div class="region" style="display:none;">

         안녕하세요. 여기는 본문입니다.

         <span class="more">more...</span>

    </div>

   

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

         만나요

    </div>

</body>

</html>


결과확인

[그림48-1]


코드 설명

[그림48-2]

18번 라인 주석 처리 하면 27번 라인 Display:none때문에 본문이 보여지지 않는다.
반대로 Display:none를 해도 18번 라인에서 show 때문에 보여진다.


반응형