jQuery 공작소 : .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="https://t1.daumcdn.net/cfile/tistory/217BF13954D74FB720" />
</div>

관련 CSS

borderborder-radiusdisplaymax-widthpadding

+ 소스 다운로드 +

예제 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="https://t1.daumcdn.net/cfile/tistory/27101B4A54D89DCB29" />
</div>

관련 CSS

borderborder-radiusdisplaymax-widthpadding

예제 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="https://t1.daumcdn.net/cfile/tistory/262B5A4854D7351402" />
        </td>
    </tr>
</table>

관련 CSS

borderborder-radiusdisplayheightmax-widthpaddingtext-alignwidth

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="https://t1.daumcdn.net/cfile/tistory/26138D4854D7351522" />
        </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

borderborder-radiusdisplayheightmax-widthpaddingtext-alignwidth

예제 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

colorcursordisplayfont-weightmargin-bottompaddingtext-align

jQuery

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

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

+ 관련 jQuery +

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

☞ 목록으로 가기