K-DigitalTraining 강의/7. JQuery
[8주차] 26. CSS의 display 속성을 none <-> inline/block [ show(), hide() ]
이대곤
2022. 7. 17. 11:06
* toggle과 다른 것은 toggle은 하나만 가지고 숨겼다 보여졌다 하는데 이건 기능이 분리되어 있다는 것임
1) show()
CSS의 display 속성을 원래대로 변화시켜, 눈에 다시 보이게 됨
2) hide()
CSS의 display 속성을 none 으로 변화시켜, 요소는 그대로 존재하지만 눈에 안보이게 됨
사용예시
* show(), hide()에 추가된 fuction은 전부 다 요소가 보여진 다음에 마지막에 실행된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex01_show_hide.html</title>
<style>
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(); // display : none 이던게 다시 원래의 inline 값을 가지며 보여짐
});
// 두번째 버튼을 클릭했을 때
$('button').eq(1).click(function(){
$('span:first').hide(); // display : inline 이던게 다시 none 값을 가지며 안보임
});
// 세번째 버튼을 클릭했을 때
$('button').eq(2).click(function(){
$('span:eq(1)').show(5000,function(){
$(this).css('background', 'yellow'); // 글자가 다 보여지고 난 다음에 실행됨
}); // show()에 왼쪽과 같이 인자를 주면 5초에 걸쳐서 보여지고, 마지막에 해주고싶은게 있으면 function을 추가로 줄 수 있음
});
// 네번째 버튼을 클릭했을 때
$('button').eq(3).click(function(){
//2번쨰 span
$('span:eq(1)').hide('slow',function(){ // 'slow/fast' 대신에 숫자로 시간으로 지정할 수 있기도 함.
alert(1);
}); // show()의 반대 액션
});
});
</script>
</head>
<body>
<button>Show It</button> <button>Hide It</button>
<span>안녕하세요.</span> <br>
<button>Show It slow</button> <button>Hide It slow</button>
<span>반갑습니다.</span><br>
<button>Show/Hide</button>
<span>또 만나요</span>
</body>
</html>