Slide Dengan Jquery,

Hai pembaca semua, pada kali ini saya akan menuliskan yang baru nambahin isi otak ku tentang jQuery lagi kali ini, membuat slide untuk link yang kita tunjuk. apa maksudnya, ketika sebuah link kita tunjuk, maka disuatu tempat berbeda akan memunculkan, gambar mungkin atau apalah, yang ingin kita tampilkan.

langsung aja scriptnya

pertama masukan library script dari jQuery itu sendiri

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

nah langsung aja kita mulai codingya

<script>
$(document).ready(function(){
	$("#link1").mouseover(function(){
		$("#slide2").fadeOut(100);
		$("#slide3").fadeOut(100);
		$("#slide1").fadeIn(300);
	});
	$("#link2").mouseover(function(){
		$("#slide1").fadeOut(100);
		$("#slide3").fadeOut(100);
		$("#slide2").fadeIn(300);
	});
	$("#link3").mouseover(function(){
		$("#slide1").fadeOut(100);
		$("#slide2").fadeOut(100);
		$("#slide3").fadeIn(300);
	});
});</script>

nah itu adalah script jQuery nya,  sekarang tinggal memasang untuk menampilkan di website/blog/apalah namanya

<div style=" overflow: hidden; width:200px; height:50px; border:1px solid #000">
<div id="slide1" style=" width:200px; height:50px; background:#FF0000;" >MENU_1</div>
<div id="slide2" style="width:200px; height:50px; background:#FFFF00;">MENU_2</div>
<div id="slide3" style="width:200px; height:50px; background:#00FF00;" >MENU_3</div>
</div>
<p id="link1">link1</p> | <p id="link2">link2</p> | <p id="link3">link3</p>

Nah inilah salah satu contoh sederhana, ketika script berbentuk seperti itu maka hasilnya adalah seperti ini :

MENU_1

MENU_2

MENU_3

link1

|

link2

|

link3

Nah perlu diketahui, bahwa semua ini bisa menjadi lebih bagus tergantung kreativitas kita, hehehe
terimakasih atas kunjunganya yahhh...