jquery hidde(),show(),animate()
show()와 hide() 반대로 동작한다고 보면 된다다.
show()는 숨긴 DOM을 다시 나타나게 하고
hide()는 DOM을 숨기는 역할을 합니다.
hide() 했을 때는 DOM의 영역까지 숨기는
css의 display:none의 속성이 적용됨.
javascript
<script>
$(function () {
//visuble 클릭 실행
$('#visible').off('click').on('click', function () {
//#result .attr(감추다) == 동등연산자 "true" 참일떄 실행시킨다.
if ($('#result').attr('hide') == "true") {
//참일때 실행시키면 #result라는 애를 보여주는부분으로 실행하면서 hide를 거짓으로
$('#result').show(function () {
$(this).attr('hide', false);
});
}
//거짓일때 실행시키면 #result라는 애를 감추는부분으로 실행하면서 true를 참으로
else {
$('#result').hide(function () {
$(this).attr('hide', true);
});
}
});
});
</script>
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 animate</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<p id="result">Hide and show</p>
<button id="visible">Animate</button>
<br/>
<br/>
<br/>
<br/>
</body>
일반적으로 DOM을 show(), hide() 할 때는 하나의 버튼을 사용하기 때문에
버튼 하나를 생성해서 애니메이션을 컨트롤한다.
최초에 DOM이 보이는 상태에서 버튼을 클릭하면
hide() animation이 적용되고 DOM의 hide상태인지 show상태인지 구분하기 위해
“hide”란 속성에 true 값을 넣어준다.
반대로 DOM이 안보이는 상태에서는
hide=“true”로 되어있기 때문에
show()가 실행되어 다시 나타나게 됩니다.
'javascript' 카테고리의 다른 글
| 메서드 체인 (0) | 2020.03.13 |
|---|---|
| 콜백함수 (0) | 2020.03.13 |
| VIDEO TAGE 관련된 내용 정리 (0) | 2018.11.15 |
| for문 object (0) | 2018.03.21 |
| for문 (0) | 2018.03.21 |
