jQuery .slideDown() Examples

Welcome To jQuery !!
+_+
Example 1
View

Source
<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()">Click here !!</button>
<div class="css_test">
    <img src="http://cfile9.uf.tistory.com/image/25150D38550B923D321E76"><br>
    <button type="button" onclick="$('.css_test').hide()">Hide</button>
</div>
Example 2
View

Source
<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)">slideDown( 2000 )</button>
    <button type="button" onclick="$('.css_test').hide().slideDown(1000)">slideDown( 1000 )</button>
    <button type="button" onclick="$('.css_test').hide().slideDown(500)">slideDown( 500 )</button>
    <button type="button" onclick="$('.css_test').hide().slideDown()">slideDown()</button>
</div>
<div class="css_test">
    <img src="http://cfile5.uf.tistory.com/image/27042F3354D74FB30A489A" /><br>
    <button type="button" onclick="$('.css_test').hide()">Hide</button>
</div>
jQuery

.slideDown( 2000 )
.slideDown( 1000 )
.slideDown( 500 )
.slideDown( )

Example 3
View
Source
<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)">Click !!</button>
</div>

<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8" /></td>
        <td><img src="http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8" style="width:250px;" /></td>
    </tr>
</table>
Example 4
Use easing effects
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 {
        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(500, '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="http://cfile6.uf.tistory.com/image/24604B4B550B9B37182BB7" /></td>
    </tr>
</table>
jQuery .slideDown() Documentation : http://api.jquery.com/slideDown/