jQuery 공작소 : .hide()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
hide 메소드는 요소를 숨겨줍니다.
CSS 의 display : none 에 해당합니다.
예제 1
기본 예제 - 이미지에 적용
보기
소스
<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 10px;
}
.css_test img {
max-width : 500px;
}
</style>
<button type="button" onclick="$('.css_test img').hide()">눌러보세용</button>
<button type="button" onclick="$('.css_test img').show()">다시하기</button>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/217BF13954D74FB720" />
</div>
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 10px;
}
.css_test img {
max-width : 500px;
}
</style>
<button type="button" onclick="$('.css_test img').hide()">눌러보세용</button>
<button type="button" onclick="$('.css_test img').show()">다시하기</button>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/217BF13954D74FB720" />
</div>
관련 CSS
jQuery
$( 셀렉터 ).hide() - 셀렉터에 해당하는 요소를 숨깁니다.
예제 2
시간 설정하기
보기
소스
<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 10px;
}
.css_test img {
max-width : 500px;
}
</style>
<button type="button" onclick="$('.css_test img').show().hide(500)">눌러보세용</button>
<button type="button" onclick="$('.css_test img').show().hide(1000)">눌러보세용</button>
<button type="button" onclick="$('.css_test img').show().hide(2000)">눌러보세용</button>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D" />
</div>
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 10px;
}
.css_test img {
max-width : 500px;
}
</style>
<button type="button" onclick="$('.css_test img').show().hide(500)">눌러보세용</button>
<button type="button" onclick="$('.css_test img').show().hide(1000)">눌러보세용</button>
<button type="button" onclick="$('.css_test img').show().hide(2000)">눌러보세용</button>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D" />
</div>
관련 CSS
jQuery
$( 셀렉터 ).hide( 시간 ) - 셀렉터에 해당하는 요소를 지정한 시간만큼 애니메이션 하며 숨깁니다.
- 시간은 1000 분의 1 초로 입력합니다.
$( 셀렉터 ).hide( 500 ) - 셀렉터에 해당하는 요소를 0.5초 동안 애니메이션 효과를 주면서 숨깁니다.
예제 3
애니메이션 효과 적용하기 (easing 효과)
보기
|
소스
<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 10px;
}
.css_test img {
max-width : 450px;
}
.css_test td {
width : 550px;
height : 450px;
text-align : center;
}
</style>
<button type="button" onclick="$('.css_test img').show().hide(5000, 'easeOutElastic')">눌러보세용</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://cfile30.uf.tistory.com/image/23356241555AC4FC15699F" />
</td>
</tr>
</table>
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 10px;
}
.css_test img {
max-width : 450px;
}
.css_test td {
width : 550px;
height : 450px;
text-align : center;
}
</style>
<button type="button" onclick="$('.css_test img').show().hide(5000, 'easeOutElastic')">눌러보세용</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://cfile30.uf.tistory.com/image/23356241555AC4FC15699F" />
</td>
</tr>
</table>
관련 CSS
jQuery
$( 셀렉터 ).hide( 시간, '이징효과명' )
- 셀렉터에 해당하는 요소를 지정한 시간만큼 애니메이션 하며 숨깁니다. 애니메이션 시 이징효과를 사용합니다.
$( 셀렉터 ).hide( 500, 'easeOutElastic' )
- 셀렉터에 해당하는 요소를 0.5초 동안 애니메이션 효과를 주면서 숨깁니다.
- easeOutElastic 이라는 효과 적용
이징효과는 아래를 참고해 주세요 ^^
참고 : easing(이징) 효과 모음
예제 4
클릭하면 사라지는 얼굴들
보기
소스
<style type="text/css">
.css_test img {
margin : 3px;
cursor : pointer;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" /><br>
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
</div>
<script type="text/javascript">
// 이미지에 클릭 이벤트 넣기
$('.css_test img').bind( 'click', function(){
$(this).hide(500);
});
</script>
.css_test img {
margin : 3px;
cursor : pointer;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" /><br>
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/huk.gif" />
</div>
<script type="text/javascript">
// 이미지에 클릭 이벤트 넣기
$('.css_test img').bind( 'click', function(){
$(this).hide(500);
});
</script>
관련 CSS
예제 5
실행 완료 후 함수 실행하기 (숨기고 다시 보여주기)
보기
|
|
소스
<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 10px;
}
.css_test img {
max-width : 450px;
}
.css_test td {
width : 550px;
height : 450px;
text-align : center;
}
</style>
<button type="button" onclick="j_test(500, 'easeOutElastic')">눌러보세용</button>
<button type="button" onclick="j_test(1000, 'easeOutElastic')">눌러보세용</button>
<button type="button" onclick="j_test(2000, 'easeOutElastic')">눌러보세용</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://cfile30.uf.tistory.com/image/23356241555AC4FC15699F" />
</td>
</tr>
</table>
<script type="text/javascript">
function j_test(n){
$('.css_test img').show().hide(n, 'easeOutElastic', function(){
$('.css_test img').show(500); // 다시 숨기기
})
}
</script>
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 10px;
}
.css_test img {
max-width : 450px;
}
.css_test td {
width : 550px;
height : 450px;
text-align : center;
}
</style>
<button type="button" onclick="j_test(500, 'easeOutElastic')">눌러보세용</button>
<button type="button" onclick="j_test(1000, 'easeOutElastic')">눌러보세용</button>
<button type="button" onclick="j_test(2000, 'easeOutElastic')">눌러보세용</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://cfile30.uf.tistory.com/image/23356241555AC4FC15699F" />
</td>
</tr>
</table>
<script type="text/javascript">
function j_test(n){
$('.css_test img').show().hide(n, 'easeOutElastic', function(){
$('.css_test img').show(500); // 다시 숨기기
})
}
</script>
관련 CSS
+ 관련 jQuery +
jQuery 홈페이지 .hide() API 문서 : http://api.jquery.com/hide/