avatar

Hüseyin BABUÇ

Yazılım Mühendisi

JQuery ile animasyon

Merhaba arkadaşlar :) Bugünkü yazımda sizlere çok güzel bir javascript kütüphanesi olan jQuery ile animasyonlar yapmayı göstereceğim.

Öncelikle jQuery'i bilmeyenler için kütüphanemizi tanıtalım.John Resig tarafından 26 ağustos 2006'da duyurulan bu kütüphane kısa sürede kolay yapısı ve kullanımıyla javascript severlerin dikkatini çekti. Ve bu kütüphaneyi kullanmakta oldukça basit. Hemen görelim.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body></body>
</html>

jQuery kütüphanemizi sayfamızın head tagları arasında yukarıdaki şekilde çağırdığımızda kütüphanemizi kullanmaya başlayabiliriz. Ayrıca bu kütüphane kendi sunucumdan kullanılsın derseniz (performanslı olur) buraya tıklayarak açılan sayfadaki kodları kopyalayıp masaüstünde bir txt dosyası oluşturup içine kodları kopyalayıp dosyayı .js formatında kaydederseniz sunucunuzdanda çağırabilirsiniz.

Hadi şimdi bir kaç animasyon ile bu kütüphane ile neler yapabileceğimize bakalım.

Demo :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
	$('#slideup').click(function(){
		$('#kutu').slideUp("slow");
	});
	$('#slidedown').click(function(){
		$('#kutu').slideDown("slow");
	});
	$('#fadein').click(function(){
		$('#kutu').fadeIn("slow");
	});
	$('#fadeout').click(function(){
		$('#kutu').fadeOut("slow");
	});
	$('#reset').click(function(){
		$('#kutu').css({"display" : "block"});
	});
	$('#slidetoggle').click(function(){
		$('#kutu').slideToggle("slow");
	});
	$('#fadetoggle').click(function(){
		$('#kutu').fadeToggle("slow");
	});
});
</script>
</head>
<body>
<div style="width:100px; height:100px;"><div id="kutu" style="width:100px; height:100px; background: #056ec6;"></div></div>
<button id="slideup">SlideUp</button><button id="slidedown">SlideDown</button><button id="fadeout">FadeOut</button><button id="fadein">FadeIn</button><button id="slidetoggle">slideToggle</button><button id="fadetoggle">fadeToggle</button><button id="reset">Reset</button>
</body>
</html>

Evet gördüğünüz gibi çok kısa kodlarla güzel efektler yaptık. Hadi kodları açıklayalım.

$(document).ready() fonksiyonu jQuery'nin sayfa yüklendiğinde tetiklediği fonksiyondur. Bu fonksiyonu kullanarak sayfa yüklendikten sonra istediğimiz fonksiyonu bu fonksiyonun içinde kullanıyoruz.

$('') ile sayfamız içinden eleman seçiyoruz. Seçeceğimiz eleman özelliği id ise "#" işareti başında olacak şekilde ismini yazıyoruz. Eğer seçeceğimiz elemanın özelliği class ise "." nokta koyduktan sonra elemanın ismini yazıyoruz. Örnek : $('#kutu') veya $('.eleman')

$.click() fonksiyonu kullanıldığı elemana maus ile tıklandığında tetiklenecek olayları alır. O elemana maus ile tıklandığında içine yazdığınız fonksiyonlar çalışır.

Efekt fonksiyonları(slideUp,fadeOut gibi) 2 parametre alır. İlk parametreye slow,fast veya milisaniye cinsinde efektin süresi yazılır. Örnek : 1000 = 1 saniye. 2. parametre efekt bittikten sonra çalıştırmak istediğiniz fonksiyonu alır ancak bu konuda bundan bahsetmeyeceğim.

$.slideUp() fonksiyonu görünür olan bir elemanı yukarı kaydırma hareketiyle görünmez yapar. Görünmez elemanlarda çalışmaz. Bu fonksiyonun tam tersi olan $.slideDown() fonksiyonu ise görünmez olan elemanı aşağı kaydırma hareketiyle görünür yapar. Görünür elemanlarda çalışmaz.

$.fadeIn() fonksiyonu görünmez olan bir elemanı şeffaflığını arttırarak görünür yapar. Görünür elemanlarda çalışmaz. Bu fonksiyonun tam tersi olan $.fadeOut() fonksiyonu ise görünür olan elemanı şeffaflığını azaltarak görünmez yapar. Görünmez elemanlarda çalışmaz.

Slide ve Fade efektlerinin toggle(değişim) fonksiyonları ise slideUp-Down ve fadeOut-In fonksiyonlarını sırayla yapar. Eğer yapacağınız işlem her butona basıldığında kapanıp açılması veya görünüp görünmez olması ise bu fonksiyonda oldukça kullanışlıdır.

Gördüğünüz gibi jQuery oldukça basit ama bir o kadarda iyi bir javascript kütüphanesidir. Bu kütüphane ile kullanıcılarınıza etkileşimli sayfalar hazırlayıp onları iyi bir kullanıcı deneyimi yaşatabilirsiniz. Bu arada jQuery'nin sitesi burada ve diğer fonksiyonlarınıda kolay bir ingilizce ile anlatılmış. Göz atabilirsiniz. Bu yazımında sonuna geldim. jQuery ile ilgili daha fazla bilgi için sitemiz takip edebilirsiniz. Herkese iyi günler diliyorum. Bu arada jQuery'nin çok sevdiğim sloganını da paylaşmadan edemeyeceğim :

Write less, Do more... JQuery

HİÇ YORUM YAPILMAMIŞ

  1. Dear Russian bro, go test another websites with cronjob, mine is just a little personal website. and i would like to meet you, contact me on hbabuc@hotmail.com