Merhaba arkadaşlar. Bu makalemizde Jquery'de bulunan animate fonksiyonunu kullanımını anlatacağız. Animate nesneleri hareket ettirmemize olanak sağlamaktadır. Yukarıda görselde gördüğünüz üzere bir kutumuz ve butonlarımız var. Kutumuzu altındaki butonlarla nesnemizi sağa, sola, aşağı, yukarı ve ilk bulunduğu konuma doğru hareket ettireceğiz. Şimdi kodlarımıza geçelim. Öncelikle html kodlarımızla başlayalım.

<div id="nesnemiz"></div>

<div id="butonlar">

<a id="sol" class="buton"><</a>

&nbsp;&nbsp; 

<a id="yukari" class="buton">Yukarı</a>

&nbsp;&nbsp; 

<a id="orta" class="buton">*</a>

&nbsp;&nbsp; 

<a id="asagi" class="buton">Aşağı</a>

&nbsp;&nbsp; 

<a id="sag" class="buton">></a>

</div>

Burada nesnemizi ve butonlarımızı oluşturduk. Fakat birşeye benzemeleri için css ile şekillendirmemiz gerekmektedir. Şimdi css kodumuza geçelim.

<style type="text/css">

#nesnemiz {

	position: absolute;

	left: 415px;

	top: 170px;

	width: 200px;

	height: 170px;

	z-index: 1;

	background-color: #E9772E;

	color:#ffffff;

	font-family:Tahoma;

	font-size:12px;

}

#butonlar {

	position: absolute;

	left: 420px;

	top: 360px;

	width: 200px;

	height: 24px;

	z-index: 2;

}

.buton {

		padding:4px;

		background-color: #01A1FE;

		color:#ffffff;

		font-family:Tahoma;

		font-size:12px;

		cursor:pointer;

	   }

.buton:hover {

		padding:5px;

		background-color: #333333;

	   }

</style>

Şuan yukarıdaki görselde görünen kısmı oluşturduk. Şimdi işin görünmeyen kısmına, butona tıklandığında işlemi gerçekleştirecek javascript kodlarımıza geçelim.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#sag").click(function(event){

$("#nesnemiz").animate({left:'615px'});

});

});

$(document).ready(function(){

$("#sol").click(function(event){

$("#nesnemiz").animate({left:'215px'});

});

});

$(document).ready(function(){

$("#yukari").click(function(event){

$("#nesnemiz").animate({top:'120px'});

});

});

$(document).ready(function(){

$("#asagi").click(function(event){

$("#nesnemiz").animate({top:'440px'});

});

});

$(document).ready(function(){

$("#orta").click(function(event){

$("#nesnemiz").animate({top:'170px',left:'415px'});

});

});

</script>

Tüm butonlarımızın tıklanma eventlerine animate fonksiyonu ile konum verdik. Butona tıkladığında buradaki piksellere göre hareket etmektedir. Örnek olarak yukarı butonuna bastığımızı varsayalım. Nesnemizin normaldeki top değeri 170'dir. Biz bu değeri 120'ye düşürünce nesnemizde hareket ederek top değerini 120'ye eşitler. Anlaşılmayan noktaları yorum yoluyla sorabilirsiniz. Sonraki makalelerde görüşmek dileğiyle...