jQuery .fadeTo() 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').fadeTo(500, 0.5)">fadeTo( 500, 0.5 )</button>
<button type="button" onclick="$('.css_test img').fadeTo(100, 0.1)">fadeTo( 100, 0.1 )</button>
<button type="button" onclick="$('.css_test img').fadeTo(1000, 1)">fadeTo( 1000, 1 )</button>

<div class="css_test">
    <img src="http://cfile23.uf.tistory.com/image/25469641555AC5000BD75E" />
</div>
jQuery

$( selector ).fadeTo( millisecond, opacity )

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="j_test(0.5)">Click</button>
<button type="button" onclick="j_test(0.1)">Click</button>
<button type="button" onclick="j_test(1)">Click</button>

<div class="css_test">
    <img src="http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8" />
</div>

<script type="text/javascript">
    function j_test(n){
        $('.css_test img').fadeTo(500, n, function(){
            alert( 'image opacity : ' + $(this).css('opacity') );
        });
    }
</script>
jQuery .fadeTo() Documentation : http://api.jquery.com/fadeTo/