Efek Fade Menggunakan Jquery

Lumayan nih dapet materi postingan yang saya dapatkan dari teman, sebenernya sih dapat dari buku tutorial tentang jquery yang saya dapatkan dari teman saya hehe. Semenjak jadi blogger yah sedikitnya saya sedikit banyak mempelajari script CSS javascript maupun jquery, tapi sayangnya sampe sekarang ngga ngerti2, ya begitulah terlalu banyak script jadi mumet. Mungkin pada postingan yang satu ini sudah tidak aneh buat para blogger khusunya blogger yang kontennya membahas tentang tutorial blogger, tapi ga ada salahnya juga kan bagi-bagi sedikit ilmu yang sudah saya dapatkan.

Langsung aja yah ke intinya (to the point) haha, di bawah ini adalah salah satu effect JQuery yang diterapkan pada elemen target atau di sini saya membuatnya dengan div id, kemudian untuk tombol pembukanya menggunakan button class yang mana jika button di klik maka target akan terbuka dan tertutup dengan efek fade in, dan fade out, dan fade out to.

Langsung saja pertama buat CSS untuk target/area nya dengan menyalin kode di bawah ini dan letakkan di atas kode ]]></b:skin>

#test {
            width: 250px;
            height: 180px;
            background: yellow;
            border: 2px solid green;​
}

Kemudian salin kode di bawah ini dan letakkan di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
            $(".fadeout").click(function() {
                $("#test").fadeOut("slow");
            });
            $(".fadein").click(function() {
                $("#test").fadeIn("slow");
            });
            $(".fadeto3").click(function() {
                $("#test").fadeTo("slow", 0.3);
            });           
        });​
</script>

Jika sudah ada script <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> atau sejenisnya maka jangan di pasang lagi atau cukup salah satu saja tapi saya sarankan pakai yang ini.

Setelah itu tinggal kode pemanggilannya salin kode di bawah ini dan letakkan di dalam gadget blog anda

<button class="fadeout">Fade Out</button>
<button class="fadein">Fade In</button>
<button class="fadeto3">Fade To 0.3</button><br>
<div id="test">Bebaskanlah Bung !!!</div>  

​Setelah itu simpan. Demo bisa dilihat/klik pada tombol di samping kanan bawah postingan.

Demo