Membuat Animasi List Item Menggunakan jQuery

Animasi • list item adalah animasi dari efek jQuery yang menggerakkan list item ke kanan beberapa koordinat lalu kembali lagi setelah pointer mouse anda melewatinya. Animasi ini banyak digunakan untuk mempercantik tampilan website anda terutama untuk navigasi website agar terlihat lebih fokus.

Demo dapat anda lihat dibawah ini, cobalah gerakkan pointer mouse anda diatasnya.

Demo:
  • List item 1
  • List item 2
  • List item 3
    • List sub item 3.1
    • List sub item 3.2
    • List sub item 3.3
  • List item 4
  • List item 5


  • Pastikan jQuery telah terinstall pada website anda. Jika belum, letakkan script berikut kedalam tag <head> website anda
    • <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
  • Selanjutnya buatlah list item baru atau list item yang sudah ada yang anda yang ingin anda berikan animasi
    • <ul id="list">
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
		<ul>
			<li>List sub item 3.1</li>
			<li>List sub item 3.2</li>
			<li>List sub item 3.3</li>
		</ul>
	<li>List item 4</li>
	<li>List item 5</li>
</ul>
  • Lalu buatlah style atau CSS agar terlihat lebih cantik. Perlu diperhatikan pada baris yang ditandai no 3 dibawah, yang menjadikan tag <li> bisa dianimasikan karena memiliki CSS value yaitu posisi relative.
    • <style type="text/css">
	.animasi{
		position:relative;
	}
	ul#list li{
		cursor:pointer;
		padding:3px 0;
		border-bottom:1px solid green;
	}
	.animasi:hover{
		font-weight:bold;
		background-color:#f0f0f0;
	}
	.demo{
		background-color:lightyellow;
		padding:10px;
	}
</style>
  • Setelah itu, kita buat script untuk animasinya
    • <script type="text/javascript">
	$(document).ready(function(){
		$("ul#list li").addClass("animasi");
		$(".animasi").hover(function(){
			$(this).animate({
					left:'20'
					}, 200);
		}, function(){
			$(this).animate({
					left:'0'
					}, 200);
		});
	});
</script>
Download: Source codenya dapat anda download lengkap disini [Download Source Code][Size: 32KB]

Baca Juga :

Older Post
Newer Post