.Net Project/Jquery 1.3.2

51장 JQueryEffect 보이기/숨기기 (FadelnFadeOut)

Magic_kit 2009. 11. 12. 14:28
반응형
 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>








반응형