블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

Category

Recent Post

Recent Comment

Archive

2009. 11. 12. 14:28 .Net Project/Jquery 1.3.2
반응형
 FadenInFadeOut.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="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".region").show(); //region 영역 보이기            $("#moreRegion").hide(); //more.. 숨기기
            //more.. 클릭시 보이기 및 숨기기
            $("span.more").click(function () {

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









반응형
posted by Magic_kit