.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="http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8" />
</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="http://cfile29.uf.tistory.com/image/21714438550B923B421996" />
</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
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="http://superkts.com/img/css/huk.gif" />
    <img src="http://superkts.com/img/css/huk.gif" />
    <img src="http://superkts.com/img/css/huk.gif" />
    <img src="http://superkts.com/img/css/huk.gif" />
    <img src="http://superkts.com/img/css/huk.gif" /><br>
    <img src="http://superkts.com/img/css/huk.gif" />
    <img src="http://superkts.com/img/css/huk.gif" />
    <img src="http://superkts.com/img/css/huk.gif" />
    <img src="http://superkts.com/img/css/huk.gif" />
    <img src="http://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
+ 관련 jQuery +
jQuery 홈페이지 .hide() API 문서 : http://api.jquery.com/hide/