jQuery 공작소 : .slideDown()

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

slideDown 메소드는 숨겨진 것을 아래로 내리면서 보여주는 효과를 만들어 줍니다.
이 메소드와 반대효과는 slideUp 이 있습니다.

예제 1
간단한 예제로 해보기 (DIV에 적용)
보기
jQuery 공작소
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        display : none;
        padding : 20px;
        text-align : center;
    }
</style>

<button type="button" onclick="$('.css_test').slideDown()">눌러보세용</button>
<div class="css_test">
    jQuery 공작소<br>
    <button type="button" onclick="$('.css_test').hide()">감추기</button>
</div>
관련 CSS
borderborder-radiusdisplaypaddingtext-align
jQuery

$( '.css_test' ).slideDown()  -  클래스명이 css_test 인것에 slideDown 효과 적용

- 가성비 높은 효과입니다. (간단한 코딩으로 그럴싸한 효과)

예제 2
슬라이드 효과 속도조절하기
보기

소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        display : none;
        padding : 10px;
        text-align : center;
    }
</style>

<div class="mb10">
    <button type="button" onclick="$('.css_test').hide().slideDown(2000)">느리게</button>
    <button type="button" onclick="$('.css_test').hide().slideDown(1000)">보통</button>
    <button type="button" onclick="$('.css_test').hide().slideDown(500)">빠르게</button>
    <button type="button" onclick="$('.css_test').hide().slideDown()">기본</button>
</div>
<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/25150D38550B923D32" /><br>
    <button type="button" onclick="$('.css_test').hide()">감추기</button>
</div>
관련 CSS
borderborder-radiusdisplaypaddingtext-align
jQuery

.slideDown( 2000 )  -  2초 동안 효과 적용
.slideDown( 1000 )  -  1초 동안 효과 적용
.slideDown( 500 )  -  0.5초 동안 효과 적용
.slideDown( )  -  기본이며 시간은 400, 0.4초 동안 효과 적용

예제 3
이미지에 적용해 보기
보기
소스
<style type="text/css">
    .css_test {
        border-collapse : collapse;
        border : 5px solid gray;
        height : 260px;
        padding : 10px;
        text-align : center;
    }
    .css_test td {
        border : 1px solid black;
        width : 270px;
    }
    .css_test img {
        display : none;
        max-width : 250px; /* 이미지 최대너비 제한 */
    }
</style>

<div class="mb10">
    <button type="button" onclick="$('.css_test img').hide().slideDown(2000)">눌러욧</button>
</div>

<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2212AF4854D7351522" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2212AF4854D7351522" style="width:250px;" /></td>
    </tr>
</table>
관련 CSS
borderborder-collapsedisplayheightmax-widthpaddingtext-alignwidth
jQuery

- table 태그를 사용하였기 때문에 세로중앙정렬이 잘 적용되었습니다.
- 너비가 설정되지 않은 왼쪽이미지는 예상과는 다른 효과로 나타납니다.
- 너비가 설정된 오른쪽 이미지는 슬라이드 효과가 제대로 적용됩니다.  ( style="width:250px;" )
- 이 예제는 차이점을 확인해보기위한 참고용 입니다.

+ 소스 다운로드 +
예제 4
easing 효과 적용해 보기 (움직임에 특수효과 적용)
보기
소스
<style type="text/css">
    .css_test {
        border-collapse : collapse;
        border : 5px solid gray;
        height : 500px;
        padding : 5px;
        text-align : center;
    }
    .css_test td {
        border : 1px solid black;
        width : 520px;
    }
    .css_test img {
        display : none;
        width : 500px;
    }
</style>

<div class="mb10">
    <button type="button" onclick="$('.css_test img').hide().slideDown(500, 'easeOutBack')">easeOutBack</button>
    <button type="button" onclick="$('.css_test img').hide().slideDown(2000, 'easeOutElastic')">easeOutElastic</button>
    <button type="button" onclick="$('.css_test img').hide().slideDown(1000, 'easeOutCubic')">easeOutCubic</button>
    <button type="button" onclick="$('.css_test img').hide().slideDown(1000, 'linear')">linear</button>
</div>

<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/213D684C550B9B3B0D" /></td>
    </tr>
</table>
관련 CSS
borderborder-collapsedisplayheightpaddingtext-alignwidth
jQuery
- 수학적인 효과인데 수학을 몰라도 쓸 수 있습니다. (ㅋ)

참고 자료 : easing(이징) 효과 모음
+ 소스 다운로드 +
+ 관련 jQuery +
jQuery 홈페이지 .slideDown() API 문서 : http://api.jquery.com/slideDown/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소