show(speed, callback) : 요소 보이기(스피드와 콜백함수 지정 가능)
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] 반대로 Display:none를 해도 18번 라인에서 show 때문에 보여진다. |
01.ShowHide.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 50.jQuery - slideUp()으로 위로 올려서 숨기기 ( 08.Effects ) (0) | 2009.11.12 |
|---|---|
| 49.jQuery - fadeIn()과 fadeOut()으로 불투명도 표시 ( 08.Effects ) (0) | 2009.11.12 |
| 47.jQuery - unbind 메서드로 이벤트 바인딩 해제 ( 07.Events ) (0) | 2009.11.12 |
| 46.jQuery - trigger 메서드로 click 행위 실행 ( 07.Events ) (0) | 2009.11.12 |
| 45.jQuery - margin을 포함한 높이와 너비 구하기 ( 06.CSS ) (0) | 2009.11.11 |
Comments