show : 요소 보이기(문서 객체를 크게 하여 보여 준다.) 엘리먼트를 나타나게 함
hide : 요소 숨기기(문서 객체를 작게 하여 사라지게 한다.) 엘리먼트를 사라지게 함
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{
display: none; /* 글자 숨기기 */
}
</style>
<script src = ../js/jquery.js type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('button:eq(0)').click(function(){
$('span:first').show();
});
$('button:eq(1)').click(function(){
$('span:first').hide();
});
$('button:eq(2)').click(function(){
$('span:eq(1)').show(5000,function(){
$(this).css('background', 'yellow');
});
});
$('button:eq(3)').click(function(){
$('span:eq(1)').hide(5000,function(){
alert(1);
});
});
$('button:last').click(function(){
$('span:last').toggle();
});
});//ready
</script>
</head>
<body>
<button>Show</button> <button>Hide</button>
<span>안녕하세요</span>
<br><br>
<button>Show slow</button> <button>Hide slow</button>
<span>반갑습니다</span>
<br><br>
<button>Show/Hide</button>
<span>또 만나요~</span>
<br><br>
</body>
</html>
실행화면
초기화면
show
코드 설명
line22~23 : show가 보일때까지의 시간을 5초로 설정했고 css를 활용해 배경색이 노란색이 되도록 설정