Bu yazımda jQuery de effectleri anlatmak istiyorum… Başlıkta dediğim gibi az kod çok iş… İşte tam burda devreye jQuery yardımımıza yetişiyor… Şu an yeterli sayıda olmasada üzerimizden yük alacak ve elimize işlevsellik ve görselliği harmanlayıp verecek seviyede olduğunu düşünüyorum… Tabi ki birazda sizlerin css ve hayal gücünüz bütün bunlara olumlu yönde etki ediyor… Gevezeliği bırakıp birazda kodlara bakalım…İlk effectimiz show() ve hide() :Bu effectlerimiz sayfa içerisinde kullandığımız nesneleri gösterip gizlemeye yarıyor… Örneğin :Bizim deneme adlı bir div imiz olsun… Bu divi :$(“#deneme”).show()
ile gösterebiliriz. Ayriyeten :”show” , “normal” ve “fast” kodları ile hızlı, yavaş yada normal hızda görünmesini sağlayabiliriz… yazmamız gereken kod ise :$(“#deneme”).show(“slow”)
Gösterdik peki ya nasıl gizleriz? tabii ki hide ile… yukarıda show yazdığımız yerlere hide yazarak kolayca nesnemizi görünmez yapabiliriz…sıradaki effectimiz toggle()toggle ın görevi kısaca iki adet elementin birini gösterip diğerini gizlemektir… unutmamamız gereken ise; nesnelerimizden biri mutlaka gizlenmiş olmalıdır ( style=”display:none;” ) iki adet

tagımız ve bir de buttonumuz olsun birinde “tıklayın” diğerinde “tıkladınız” yazsın… buttonun için şu kodu yazarız :$(“#dugme”).click(function () {$(“p”).toggle();});
yukarıdaki ile aynı şekilde bununda hızını ayarlamak mümkündür… yapmamız gereken tek şey ise toggle(“slow”); şeklinde yazmaktır…peki ya birden çok nesneyi kapatıp açmak istersek ne yapmalıyız?örneğin 2

nesnemiz olsun : tabiki bu nesnelerin style larında görünmemesini istediklerimizi görünmez yapacağız…$(“p”).toggle( flip++ % 2 == 0 );
gittikçe eğlenceli hale gelen effectlerimizde sırada slide var… slide effectinin 3 çeşit kullanımı vardır : slideDown, slideUp, slideToggle…slideDown : nesneyi aşağıya doğru kaydırarak gösterir.slideUp : nesneyi yukarı kaydırarak gizler.slideToggle : nesneyi aşağı doğru kaydırarak gösterme ve yukarı kaydırarak gizleme işlemini birlikte yapar.yukarıdaki nesnelerde olduğu gibi effectin hızını “slow”, “normal”, “fast” şeklinde ya da milisaniye bazında belirtebiliriz ör: “1000” yazdığımızda effect toplam 1 saniye sürecektir. kullanımı :$(“#div”).slideDown();$(“#div”).slideUp();$(“#div”).slideToggle();
şekindedir…şimdi de sırada saydamlığı arttırarak gizleme ve gösterme işlemleri için fade effecti var : fade inde 3 şekilde kullanımı vardır : fadeIn, fadeOut ve fadeTo.fadeIn : displayi none olan nesnemizi saydamlığını arttırarak göstermektir.fadeOut : displayi block olan nesnemizi saydamlığını azaltarak gizlemektir.fadeTo : nesnenizi tamamen görünmez yada tamamen görünür hale getirmek istemiyorsunuz işte tam burda fadeTo devreye giriyor.kullanımları :fadeIn(“slow”); // yukarıdaki hız seçenekleri bu effect içinde geçerlidirfadeOut(“slow”);fadeTo(fadeTo(“slow”, 0.66); // 0.66 olan alan nesnemizin saydamlığıdır.
peki bütün bunlar iyi hoş; biz hayalimizdeki effecti nasıl verebiliriz? işin en güzel kısmıda burda başlıyor : animate.$(“#deneme”).animate({width: “300px”,opacity: 0.5,marginLeft: “10px”,fontSize: “13px”,borderWidth: “10px”}, 1500 );
bu şekilde bir animate kullanımında işlemler sırasıyla 1,5sn içinde :1 – deneme adlı nesnemizin genişliği içinde 300px olacaktır.2 – saydamlığı 0.5 olacaktır.3 – soldan boşluğu 10px,4 – font büyüklüğü 13px,5 – kenar genişliği ise 10px olacaktır.peki iki adet nesnemiz ve 3 adet de animate olayını tetikleyen butonumuz var diyelim ve bu nesnelerin animate effectlerini aynı anda işleme koymak istiyoruz. nesnelerimizden biri “p1” diğeri ise “p2” olsun ;iki nesnemiz içinde tetikleyici nesnelere (örneğin button) ayrı ayrı animate yazdıktan sonra 3. tetikleyici nesnemizin click olayına :$(“#btn1”).add(“#btn2”).click();
yazıyoruz.peki effectleri iptal etmek için ne yapmalıyız? onunda cevabı :jQuery.fx.off = true;
biraz uzun bir yazı oldu ama effectlere genel bir açıklık getirdiğime inanıyorum…Bol kodlu günler dilerim…