Zincirleme derken neden bahsediyorum ;

Bir divimiz var ve biz bunu önce genişlemesini sonrada yüksekliğinin değişmesini istiyoruz. İşte burada jQuery’nin en sevdiğim özelliklerinden birisi olan zincirleme devreye giriyor.

Önce javascript kodlarımızı yazalım :

function func1(id)
{
  //id'sini parametre olarak gönderdiğimiz elementin
  //önce genişliği ile sonrada arkaplan rengi ile oynuyoruz
  $('#'+id).animate({width:500},250).animate({height:500},250);
  //zincirleme animasyonlarda bir işlem bittikten sonra
  //diğeri başlar
}

HTML kodlarımız :

<input onclick="func1('div1')" type="button" value="oynat" id="genislet" />
<br />
<div style="width:100px;height:100px;background:#f00;display:block;" id="div1"></div>

Örneğimize buradan ulaşabilirsiniz.

Zincirleme, sadece animasyonlar arasında bir hiyerarşi sağlamaktadır. Yani animateden sonra bir css kodu yazarsanız bu animasyon başladığı anda gerçekleşecektir.

Temel olarak anlatmamız gerekenleri bitirdiğimize göre örneklerimizi komplike hale getirelim.

4 tane resim içeren bir animasyon hazırlayalım. Başlangıçta hepsinin eni ve boyu eşit görünecek. Normal boyutları farklı resimler seçecez ve tıkladığımız resim orjinal boyutuna gelecek. Öncelikle resimler için google’dan “cat” diye arama yapıp 4 tane resim seçeyim

Resimlerimizi yan yana sıralıyoruz ve basit bir css uyguluyoruz. CSS’imizin amacı, tüm resimleri aynı boyutlardaki divlerin içerisine yerleştirerek farklı boyutlardaki resimlerin görüntüyü bozmasını engelliyoruz.

Öncelikle HTML kodlarımızı yazalım :

<div style="margin-left: 30%; margin-top: 150px;">
    <div class="resim"><img src="http://www.arastiralim.net/wp-content/uploads/2008/02/lady-cat.jpg" /></div>
    <div class="resim"><img src="http://www.plasticbamboo.com/wp/wp-content/uploads/hello-kitty-cat.jpg" /></div>
    <div class="resim"><img src="http://www.fulyavet.com/images/cat17.jpg" /></div>
    <div class="resim"><img src="http://asymptotia.com/wp-images/2006/12/copy_cat_copies.jpg" /></div>
</div>

CSS kodlarımız :

.resim{
    height:90px;
    float:left;
    margin:0px 10px;
    width:100px;
    overflow:hidden;
}

HTML ve CSS kodlarımızı tamamladığımıza göre jQuery kodlarımızı yazmaya başlayabiliriz.

Sayfamız yüklendiği zaman $(document).ready() ile tüm resimlerimizin orjinal boyutlarını alıp rel‘e atıyoruz. Tıklandığı zaman resmimizin boyutunu alabilmek için en kısa yöntem bence. Boyutları gerekli yere atadıktan sonra tüm resimlerimizin genişliğini 100 yapıyoruz. Yükseklikte genişliğe orantılı olarak otomatikmen değişiyor. Resimlerden herhangibirisine tıklandığı zaman yapılacak işlemleri belirliyoruz. Aşağıda zaten kodların içinde açıklamaları var ancak ben burada “each“den bahsetmek istiyorum ;

 $('div.resim>img').each(function(){
$(this).attr('rel',$(this).width());
});

satırları ile class’ı resim olan divlerin içerisindeki tüm resimleri “each” yardımı ile tek tek dönüyoruz. Yani hazır bir array‘i yine hazır bir şekilde tek tek elemanlarına ayırıyoruz. Özellikle id ve class gibi seçivilerimizin olmadığı durumlarda bir üst seçiciye bağlı olarak işlem yapmamızı kolaylaştırır(programcılar için çok tanıdıktır zaten). Bu kod satırlarındaki üst seçicimi “div.resim“.

En son olarak javascript kodlarımızı yazıyoruz :

$('div.resim>img').each(function(){
    //each ile tüm resimlerimizin orjinal genişliğini tektek
    //rel özelliğine(attribute) atıyoruz
    $(this).attr('rel',$(this).width());
    //tıklandığı zamanda buradan aldığımız değer ile
    //genişlik ve yüksekliğini ayarlıyoruz
});
//genişlik alma işlemimiz bittikten sonra tüm resimlerin
//genişliğini 100px'e getiriyoruz
$('div.resim>img').width(100);
//galerimizdeki bir resime tıklandığı zaman
//yapacağı işlemlere geçelim
$('div.resim>img').click(function(){
//öncelikle açık olan resim için tüm resimleri sıfırlıyoruz
$('div.resim>img')
.animate({width:100},250)//animate ile genişliğini 100px'e çekiyoruz
//css özelliklerinide ilk haline getirmemiz gerekiyor
.css({'z-index':'1','position':'static','margin-left':'0px','margin-top':'0px'});
//ilk başta atadığımız rel değer ile animasyon sonunda
//resmimizin geleceği genişliği alıyoruz
var w = $(this).attr('rel');
//bulunduğu yeri ortalaması için biraz sola kaydırmak
//gerekeceğinden marginlerden 20 genişlikten dolayıda
//100 geliyor toplam genişlikten 120 çıkartıp
//2 ye bölerek ne kadar sola kayacağını hesaplıyoruz
var mL = (w-120)/2;
//basit ancak önemli bir kontrol ekliyoruz
//eğer resim küçük ise büyütme işlemlerini yap diyoruz
//isterseniz bu satıları kaldırarak farkı görebilirsiniz
if($(this).width() == 100)
{
    //öncelikle resmimizin positionunu absolute yaparak divin
    //css>overflow özelliğini ezmesini sağlıyoruz
    //daha sonra z-index'ini 5 yaparak diğer resimlerin üzerine alıyoruz
    //ve animasyonumuz ile estetik bir şekilde genişlik,
    //marginTop ve marginLeft'i ile oynuyoruz
    $(this)
    .css({"position":"absolute","z-index":"5"})
    .animate({width:w,marginTop:'-10%',marginLeft:'-'+mL},250);
    //ve bu basit resim galerimiz böylece sona eriyor
}
});

Bu örneğimizede buradan ulaşabilirsiniz.

Animate jQuery’nin effect grubundan bir öğedir. Genel yazım şekli ;

.animate( params, [duration], [easing], [callback] );

params : animasyonumu belirleyen parametrelerden oluşur.

duration : anismasyonun süresini belirlememizi sağlar. Alabileceği değerler “slow” , “normal” , “fast” ve rakamsaldır. Bir saniye 1000 milisaniye kabul ediliyor.

easing : 2 değer alabilen özel bir efekttir. “swing(sallantı-sallanma)” ve “linear (çizgisel)” değerleri alır. Plug-in gerektirmektedir.

function : animasyonun sonunda meydana istediğiniz işlemleri çağırmanıza yarar.

Şimdi örnekler ile açıklamaya devam edebilim;

ilk örneğimizde sadece bir divin genişlik ve yüksekliğini değiştireceğiz. Kodlarımız aşağıdaki şekilde ;

//öncelikle sayfamızın yüklenmesi tamamlandığı zaman yine jQuery
//ile butonlarımızın onclick event'ine animasyonlarımızı atıyoruz
$(document).ready(function(){

$('#genislet').click(function(){
$('#aniDiv1').animate({
width:200,//burada div'in genişliğini 200px olarak atıyoruz
height:200//burada div'in yükseliğini 200px olarak atıyoruz
},250//animasyonumuzun hızını 250 milisaniye olarak ayarlıyoruz (yani 1/4 saniye)
);
});

$('#daralt').click(function(){
$('#aniDiv1').animate({
width:50,
height:50
},250);
});
});

Örneğimize buradan ulaşabilirsiniz.

İkinci örneğimizde az önceki divimizin yerini değiştirecelim. Tabii ki ilk önce kodlarımızı yazalım.

$("#sol").click(function(){
$("#Div3").animate({"left": "+=50px"}, "slow");
});

$("#sag").click(function(){
$("#Div3").animate({"left": "-=50px"}, "slow");
});

Bu örneğimizde dikkatinizi çekmek istediğim nokta “left”:”-=50px” satırlarındaki “-=” ve “+=”. Bu 3 karakter ile oluşan 2 karakterlik katar bizi bir çok kodu yazmaktan kurtarıyor. Bu kodlar olmasa nasıl yazmamız gerekcekti ;

var left = $('#Div3').css('left');
left = left.replace('px','');
left += 50;
$("#Div3").animate({"left": left+"px"}, "slow");

İşte jQuery’nin gücü

Örneğimize buradan ulaşabilirsiniz.

Şimdiki örneğimizde bir elementin şeffaflığı (opacity) ile oynuyoruz.

$('#btnOpacity0').click(function(){
$("#Div2").animate({opacity: 0}, "slow");
});
$('#btnOpacity05').click(function(){
$("#Div2").animate({opacity: 0.5}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({opacity: 1}, "slow");
});

Örneğimize buradan ulaşabilirsiniz.

“opacity” bu örneğimizdeki gibi sayısal değer (0 ile 1 arasında) alabildiği gibi “show(göster)” ve “hide(gizle)” değerlerinide alabilir. Ancak bu sefer yazım şeklimiz biraz değişiyor ;

$('#btnOpacity0').click(function(){
$("#Div2").animate({"opacity": "hide"}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({"opacity": "show"}, "slow");
});

Şimdiki örneğimizde ise bir animasyon tamamlandıktan sonra fonksiyon çağıracağız. “Duration” dan sonra “function(){}” yazıyoruz ve normal bir javascript fonksiyonu gibi “{}” arasına istediğimiz kodları yazıyoruz.

$("#Div4").css("opacity","0.5");
$('#btnCalistir').click(function(){

$("#Div4").animate({width:400,height:400,opacity:1}, "slow", function(){alert("animasyonumuz tamamlandı");});

});

Örneğimize buradan ulaşabilirsiniz.

Tüm örnekler 1 sayfada yer alıyor.
Tüm kodlar :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Animate</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(document).ready(function(){

var tumAdres=String(this.location);
veri=tumAdres.split("?")[1];
if(document.getElementById(veri))
{
$('#'+veri).show();
}

$('#genislet').click(function(){
$('#aniDiv1').animate({
width:200,//burada div'in genişliğini 200px olarak atıyoruz
height:200
},250);
});
$('#daralt').click(function(){
$('#aniDiv1').animate({
width:50,
height:50
},250);
});

$("#sol").click(function(){
$("#Div3").animate({"left": "-=50px"}, "slow");
});

$("#sag").click(function(){
$("#Div3").animate({"left": "+=100px"}, "normal");
});

$('#btnOpacity0').click(function(){
$("#Div2").animate({opacity: 0}, "slow");
});
$('#btnOpacity05').click(function(){
$("#Div2").animate({opacity: 0.5}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({opacity: 1}, "slow");
});

$("#Div4").css("opacity","0.5");
$('#btnCalistir').click(function(){

$("#Div4").animate({width:400,height:400,opacity:1}, "slow", function(){alert("animasyonumuz tamamlandı");});

});

});
</script>
</head>
<body>
<div id="ornek1" style="display:none;">
<div class="aciklama">
ilk örneğimizde divimizin sadece boyutlarını değiştireceğiz
</div>

<div id="divli1" class="div">
<input type="button" value="genişlet" id="genislet" /> <input type="button" value="daralt" id="daralt" />
<br />
<div style="width:100px;height:100px;background:#f00;display:block;" id="aniDiv1"></div>
</div>
</div>

<div id="ornek2" style="display:none;">
<div class="aciklama">
ikinci örneğimizde divimizin yerleşimini değiştireceğiz
</div>

<div>
<input type="button" value="<<" id="sol" /> <input type="button" value=">>" id="sag" />
<br />
<div style="width:100px;height:100px;background:#ccd6e5;display:block;left:200px;position:absolute;" id="Div3"></div>
</div>
</div>

<div id="ornek3" style="display: none;">
<div class="aciklama">
üçüncü örneğimizde divimizin şeffalığı ile oynayacağız
</div>
<div>
<input id="btnOpacity0" type="button" value="gizle" /> - <input id="btnOpacity05" type="button" value="şeffaflaştır" /> - <input id="btnOpacity1" type="button" value="göster" />
<br />
<div id="Div2" style="width: 100px; height: 100px; background: #ccd6e5; display: block;left: 50px; position: absolute;margin-top:10px;"></div>
</div>
</div>

<div id="ornek4" style="display: none;">
<div class="aciklama">
dördüncü örneğimizde fonksiyonumuz tamamlandığında bir "alert" veriyoruz.
</div>
<div>
<input id="btnCalistir" type="button" value="çalıştır" />
<br />
<div id="Div4" style="width: 100px; height: 100px; background: #ccd6e5; display: block;left: 50px; position: absolute;margin-top:10px;"></div>
</div>
</div>
</body>
</html>

Bu yazımıza burada son veriyoruz. Tahminen bu serimiz 3 yazı olacak. Bir sonraki yazıda görüşmek dileğiyle hoşçakalın…