jQuery .slideUp() Examples

Welcome To jQuery !!
+_+
Example 1
View
jQuery Examples

Hello !!
Source
<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()">Click !!</button>
<button type="button" onclick="$('.css_test').show()">Again</button>

<div class="css_test">
    jQuery Examples<br>
    <img src="http://cfile4.uf.tistory.com/image/276870375501AED00DC302" /><br>
    Hello !!
</div>
jQuery

$( selector ).slideUp()

Example 2
View

Source
<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)">slideUp( 2000 )</button>
    <button type="button" onclick="$('.css_test').show().slideUp(1000)">slideUp( 1000 )</button>
    <button type="button" onclick="$('.css_test').show().slideUp(500)">slideUp( 500 )</button>
    <button type="button" onclick="$('.css_test').show().slideUp()">slideUp()</button>
</div>
<div class="css_test">
    <img src="http://cfile23.uf.tistory.com/image/211F9841555AC4FE24424F" /><br>
</div>
jQuery

$( selector ).slideUp( millisecond )

Example 3
Use function
View
Source
<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="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="http://cfile2.uf.tistory.com/image/237CBF4C550B9B3C2BD55C" /></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>
jQuery

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

slideUp( 500, easing, function(){ code } )

jQuery .slideUp() Documentation : http://api.jquery.com/slideUp/