jQuery 공작소 : .slideUp()

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

slideUp 메소드는 지정한 대상을 위로 올리는 효과를 주어 감춥니다.
이 메소드와 반대효과는 slideDown 이 있습니다.

예제 1
간단한 예제로 해보기 (DIV에 적용)
보기
jQuery 공작소

방문해 주셔서 감사드려요 !
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 10px;
        text-align : center;
    }
</style>

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

<div class="css_test">
    jQuery 공작소<br>
    <img src="https://t1.daumcdn.net/cfile/tistory/24242C3D552F50A61B" /><br>
    방문해 주셔서 감사드려요 !
</div>
관련 CSS
borderborder-radiuspaddingtext-align
jQuery

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

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

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

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

<div class="mb10">
    <button type="button" onclick="$('.css_test').show().slideUp(2000)">느리게</button>
    <button type="button" onclick="$('.css_test').show().slideUp(1000)">보통</button>
    <button type="button" onclick="$('.css_test').show().slideUp(500)">빠르게</button>
    <button type="button" onclick="$('.css_test').show().slideUp()">기본</button>
</div>
<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/24604B4B550B9B3718" /><br>
</div>
관련 CSS
borderborder-radiuspaddingtext-align
jQuery

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

반대 효과 메서드 : .slideDown()

예제 3
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 {
        width : 500px;
    }
</style>

<div class="mb10">
    <button type="button" onclick="$('.css_test img').show().slideUp(500, 'easeOutBack')">easeOutBack</button>
    <button type="button" onclick="$('.css_test img').show().slideUp(2000, 'easeOutElastic')">easeOutElastic</button>
    <button type="button" onclick="$('.css_test img').show().slideUp(1000, 'easeOutCubic')">easeOutCubic</button>
    <button type="button" onclick="$('.css_test img').show().slideUp(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/24088C3354D74FB505" /></td>
    </tr>
</table>
관련 CSS
borderborder-collapseheightpaddingtext-alignwidth
jQuery

- 수학적인 효과인데 수학을 몰라도 쓸 수 있습니다. (ㅋ)
- 효과의 종류와 예제는 아래 참고자료 링크를 참고해 주세요.

slideUp( 속도, '효과이름' )
slideUp( 500, 'easeOutBack' )  -  0.5초의 속도로 easeOutBack 움직임 효과 적용하여 slideUp

참고 자료 : easing(이징) 효과 모음

예제 4
실행 종료후 함수 호출
보기
slideUp 효과가 끝나면 slideDown 효과를 적용하여 다시 보이게 만드는 예제입니다.

소스
<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 {
        width : 500px;
    }
</style>

slideUp 효과가 끝나면 slideDown 효과를 적용하여 다시 보이게 만드는 예제입니다.<br><br>
<div class="mb10">
    <button type="button" onclick="j_test('easeOutBack')">easeOutBack</button>
    <button type="button" onclick="j_test('easeOutElastic')">easeOutElastic</button>
    <button type="button" onclick="j_test('easeOutCubic')">easeOutCubic</button>
    <button type="button" onclick="j_test('linear')">linear</button>
</div>

<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2552A23854D74C4E0B" /></td>
    </tr>
</table>

<script type="text/javascript">
    function j_test(easing){
        $('.css_test img').stop().show().slideUp(500, easing, function(){
            $('.css_test img').slideDown(500, easing);
        });
    }
</script>
관련 CSS
borderborder-collapseheightpaddingtext-alignwidth
jQuery

function j_test( easing ){
       $('.css_test img').stop().show().slideUp( 500, easing, function(){
               $( '.css_test img' ).slideDown( 500, easing );
       } );
}

slideUp( 500, easing, function(){ 코딩 } )

+ 관련 jQuery +
jQuery 홈페이지 .slideUp() API 문서 : http://api.jquery.com/slideUp/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소