Blog Content

    티스토리 뷰

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

    반응형
    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 때문에 보여진다.


    반응형

    Comments