Effects - Show() / Hide() 메서드 (보이기 및 숨기기)

by 조쉬 posted Oct 16, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

[ShowHide.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 () {

            //[1] 기본값 설정

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

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

           

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

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

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

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

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

 



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

 


[실행결과]

--> 첫 화면.






--> 위의 그림에서 "more..."텍스트를 마우스로 클릭하였을 때의 화면

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