jQuery .fadeIn() Examples

Welcome To jQuery !!
+_+
Example 1
View
Source
<style type="text/css">
    .css_test {
        border:5px solid gray;
        border-radius:5px;
        padding:10px;
    }
    .css_test img {
        display:none;
    }
</style>

<button type="button" onclick="$('.css_test img').fadeIn()">Click</button>
<button type="button" onclick="$('.css_test img').hide()">Again</button>

<div class="css_test">
    <img src="http://cfile2.uf.tistory.com/image/244ED638555ABF45091C42" />
</div>
Example 2
View
Source
<style type="text/css">
    .css_test {
        border:5px solid gray;
        border-radius:5px;
        padding:10px;
    }
    .css_test img {
        display:none;
        max-width:500px;
    }
</style>

<button type="button" onclick="j_test(100)">0.1 seconds</button>
<button type="button" onclick="j_test(500)">0.5 seconds</button>
<button type="button" onclick="j_test(1000)">1 seconds</button>
<button type="button" onclick="j_test(2000)">2 seconds</button>

<div class="css_test">
    <img src="http://cfile3.uf.tistory.com/image/2366EB4B550B9B37158B87" />
</div>

<script type="text/javascript">
    function j_test(n){
        $('.css_test img').hide().fadeIn(n);
    }
</script>
Example 3
View
Source
<style type="text/css">
    .css_test {
        border:5px solid gray;
        border-radius:5px;
        padding:10px;
    }
    .css_test img {
        display:none;
        max-width:500px;
    }
</style>

<button type="button" onclick="j_test(1000)">Press the button</button>

<div class="css_test">
    <img src="http://cfile21.uf.tistory.com/image/237EED50550B9B3E0C912C" />
</div>

<script type="text/javascript">
    function j_test(n){
        $('.css_test img').hide().fadeIn(n, function(){
            alert('Good !!');
        });
    }
</script>
jQuery .fadeIn() Documentation : http://api.jquery.com/fadeIn/