jQuery .fadeToggle() 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 {
        max-width:500px;
    }
</style>

<button type="button" onclick="$('.css_test img').fadeToggle()">Press multiple times !!</button>

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

$( selector ).fadeToggle()

Example 2
View
Source
<style type="text/css">
    .css_test {
        border:5px solid gray;
        border-radius:5px;
        padding:10px;
    }
    .css_test img {
        max-width:500px;
    }
</style>

<button type="button" onclick="$('.css_test img').stop().fadeToggle(500)">fadeToggle(500)</button>
<button type="button" onclick="$('.css_test img').stop().fadeToggle(1000)">fadeToggle(1000)</button>
<button type="button" onclick="$('.css_test img').stop().fadeToggle(2000)">fadeToggle(2000)</button>

<div class="css_test">
    <img src="http://cfile30.uf.tistory.com/image/23356241555AC4FC15699F" />
</div>
jQuery

$( selector ).fadeToggle( millisecond )

Example 3
View
Source
<style type="text/css">
    .css_test {
        border:5px solid gray;
        border-radius:5px;
        padding:10px;
    }
    .css_test img {
        max-width:500px;
    }
</style>

<button type="button" onclick="j_test()">Press Button !!</button>

<div class="css_test">
    <img src="http://cfile2.uf.tistory.com/image/216CB14B550B9B3812A14E" />
</div>

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