.show()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

show 메소드는 숨겨진 요소를 보이게 합니다.

+_+
예제 1
기본 예제 - 이미지에 적용
보기
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 10px;
    }
    .css_test img {
        display : none;
        max-width : 500px;
    }
</style>

<button type="button" onclick="$('.css_test img').show()">눌러보세용</button>
<button type="button" onclick="$('.css_test img').hide()">다시하기</button>

<div class="css_test">
    <img src="http://cfile25.uf.tistory.com/image/2565C53D552F50A73FAC29" />
</div>
관련 CSS
예제 2
시간 설정하기
보기
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 10px;
    }
    .css_test img {
        display : none;
        max-width : 500px;
    }
</style>

<button type="button" onclick="$('.css_test img').hide().show(500)">눌러보세용</button>
<button type="button" onclick="$('.css_test img').hide().show(1000)">눌러보세용</button>
<button type="button" onclick="$('.css_test img').hide().show(2000)">눌러보세용</button>

<div class="css_test">
    <img src="http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8" />
</div>
관련 CSS
예제 3
애니메이션 효과 적용하기 (easing 효과)
보기
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 10px;
    }
    .css_test img {
        display : none;
        max-width : 450px;
    }
    .css_test td {
        width : 550px;
        height : 450px;
        text-align : center;
    }
</style>

<button type="button" onclick="$('.css_test img').hide().show(500, 'easeOutElastic')">눌러보세용</button>
<button type="button" onclick="$('.css_test img').hide().show(1000, 'easeOutElastic')">눌러보세용</button>
<button type="button" onclick="$('.css_test img').hide().show(2000, 'easeOutElastic')">눌러보세용</button>

<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td>
            <img src="http://cfile30.uf.tistory.com/image/2430183D552F509D16EDF1" />
        </td>
    </tr>
</table>
관련 CSS
jQuery
애니메이션 효과 참고 : easing(이징) 효과 모음
예제 4
실행 완료 후 함수 실행하기
보기
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 10px;
    }
    .css_test img {
        display : none;
        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://cfile22.uf.tistory.com/image/267B673354D74FB31C484A" />
        </td>
    </tr>
</table>

<script type="text/javascript">
    function j_test(n){
        $('.css_test img').hide().show(n, 'easeOutElastic', function(){
            $('.css_test img').hide(500); // 다시 숨기기
        })
    }
</script>
관련 CSS
예제 5
show 메서드를 이용한 간단한 FAQ 형태의 예제
보기
자주 묻는 질문 (질문을 누르면 답변이 보여집니다)
- jQuery 공작소는 왜 공작소 인가요?
항상 네이밍하는데는 어려움이 많습니다. 굉장히 중요하기도 하구요.
그래서 "만든다" 와 의미가 통하는 공작소가 마음에 들었습니다. (웃음 ㅎㅎ)
- 다른 공작소가 더 있나요?
지금 이 jQuery 공작소 외에 CSS 공작소도 있습니다. 다른 공작소도 계속 만들어볼 예정입니다.
- 마지막으로 하실 말씀은?
많은 방문 부탁해요~! ^^;
소스
<style type="text/css">
    .css_test .tit {
        color : blue;
        font-weight : bold;
        margin-bottom : 10px;
        text-align : center;
    }
    .css_test .q {
        cursor : pointer;
        font-weight : bold;
        padding : 5px;
    }
    .css_test .a {
        color : navy;
        display : none;
        padding : 10px;
    }
</style>

<div class="css_test">
    <div class="tit">자주 묻는 질문 (질문을 누르면 답변이 보여집니다)</div>
    <div class="q" onclick="$(this).next().show()">- jQuery 공작소는 왜 공작소 인가요?</div>
    <div class="a">항상 네이밍하는데는 어려움이 많습니다. 굉장히 중요하기도 하구요.<br>그래서 "만든다" 와 의미가 통하는 공작소가 마음에 들었습니다. (웃음 ㅎㅎ)</div>
    <div class="q" onclick="$(this).next().show()">- 다른 공작소가 더 있나요?</div>
    <div class="a">지금 이 jQuery 공작소 외에 CSS 공작소도 있습니다. 다른 공작소도 계속 만들어볼 예정입니다.</div>
    <div class="q" onclick="$(this).next().show()">- 마지막으로 하실 말씀은?</div>
    <div class="a">많은 방문 부탁해요~! ^^;</div>
</div>
관련 CSS
jQuery

$( this ).next().show()  -  현재 요소 다음것보여줍니다.

이 예제와 같은 방식을 순수 자바스크립트로만 만들면 은근히 복잡합니다. (귀찮죠 ㅎㅎ)
하지만 제이쿼리를 사용하니 간단하게 구현 되었습니다.

+ 관련 jQuery +
jQuery 홈페이지 .show() API 문서 : http://api.jquery.com/show/