:: 글답변 :: 이 름 패스워드 이메일 홈페이지 옵 션 html  분 류 선택하세요 Html CSS Script JQuery ASP PHP GNU .NET MySQL MsSQL DNS SEO ENG IONIC REACT 제 목 > > > <title>보이기 및 숨기기</title> > > <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> > <script type="text/javascript"> > $(document).ready(function () { > $(".region").show(); > $("#moreRegion").hide(); > $("span.more").click(function () { > // 3000 : 3초, 'slow', 'normal', 'fast' > $("#moreRegion").show('slow'); // 천천히 보이기 > $(this).hide('fast'); // more 버튼 숨기기 > }); > }); > </script> > <div class="region" style="display:none;"> > 안녕하세요. 여기는 본문입니다. > <span class="more">more...</span> > </div> > <div id="moreRegion" style="height:100px;background-color:Yellow;"> > 또 만나요 > </div> > > > > <title>서서히 보이기 및 숨기기</title> > > <style type="text/css"> > div { background-color:Silver; height:100px; } > </style> > <script type="text/javascript"> > $(document).ready(function () { > $("#btn").click(function () { > $("#first").fadeIn('slow'); // 서서히 나타나기 > $('#second').fadeOut('fast'); // 빠르게 감추기 > }); > }); > </script> > <input type="button" id="btn" value="페이드 효과 주기" /> > <div id="first" style="display:none;background-color:Yellow;">첫번째 영역</div> > <div id="second">두번째 영역</div> > > > > <title>슬라이드업</title> > > <script type="text/javascript"> > $(document).ready(function () { > $("#btn").click(function () { > $("#first") > .fadeIn('slow') // 서서히 보이기 > .slideUp(3000); // 슬라이드업 : 숨기기 > }); > }); > </script> > <input type="button" id="btn" value="슬라이드 업" /> > <div id="first" style="display:none;background-color:Yellow;height:100px;">첫번째 영역</div> > <div id="second">두번째 영역</div> > > > > <title>슬라이드 업/다운</title> > > <script type="text/javascript"> > $(document).ready(function () { > $("#btn10").click(function () { > //[!] 숨김->보임->숨김 > $("#first10").slideToggle('slow'); > }); > }); > </script> > <input type="button" id="btn10" value="슬라이드 토글" /> > <div id="first10" style="display:none;background-color:Yellow;height:100px;">첫번째 영역</div> > 링크 #1 링크 #2 파일첨부   왼쪽의 글자를 입력하세요.