jQuery’nin işimizi kolaylaştırdığı tartışılamaz. Ancak bize sunmuş olduğu bazı imkanlar varki bunlar işimizi kolaylaştırmanın yanında işimizi zevkli kılıyor. Bunların başındada animate geliyor. Çok daha görsel sayfalar oluşturabilmek çok daha kolay.

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…

Benzer Yazılar