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...