pillinetwork hesabınızla giriş yapın.

Az kod, çok iş; eşittir jQuery effects

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 :

1
 
$("#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 :

1
 
$("#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 :

1
2
3
 
$("#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...

1
 
$("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ı :

1
2
3
 
$("#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ı :

1
2
3
 
fadeIn("slow"); // yukarıdaki hız seçenekleri bu effect içinde geçerlidir

fadeOut("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.

1
2
3
4
5
6
7
 
$("#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 :

1
 
$("#btn1").add("#btn2").click();
yazıyoruz.

peki effectleri iptal etmek için ne yapmalıyız? onunda cevabı :

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

Spacer
Spacer
/* Etiketler: , , , , , , , */
/* mmacit yazdı. 04 Ocak 2010 10:31. 16 yorum var */

Yorumlar

Bu yazı = http://docs.jquery.com/Effects

/* http://protestit.org/ */
/* sundowatch | 04 Ocak 2010 13:07 */

evet ben de söylecektim ama demedim. biraz gereksiz bir yazı olmuş. en azından türkçe kaynak olarak yeni başlayanlar faydalanabilir.

JQuery'nin tutorial sayfası ve docs'u çok keyifli iyi organize edilmiş. örnkeleriyle demolarıyla öğrenemek isteyenlere muhteşem bir kaynak. üstelik bir çok ülkeye türkçe kaynakların daha çok olması gurur verici.

/* daily news | Logmania | RockLies */
/* vectro | 04 Ocak 2010 13:31 */

yukarıdaki 2 yorum neye hizmet ediyor bilmesemde herhangi bir şey söyleme gereği duymuyorum. yazdım yayınlanmış. siz daha iyilerini yazın okuyalım. ayrıca herkes ingilizce bilmiyor bunu da göz önünde bulundurursanız iyi edersiniz. beğenmediysen sayfadan çıkar okumazsın. sadece yukarıdaki yorumcular için değil kodaman.org ta son zamanlarda yazılmış yazılara çamur atma yarışı var. kardeşim beğenmediysen sana kimse zorla okutmuyor. anlamıyorum gerçekten. ben hiç olmazsa türkçe yazmışım yazıyı sizin yorumlarınızda bile imla hataları dolu onlara ne demeli?

/* mmacit | 04 Ocak 2010 20:28 */

mmcait biraz eleştiriye açık olmalısın. kötü bir amaçla yorum yazmadım, zaten yeni başlayanlara ingilizce bilmeyenlere faydalı olabileceğini de söyledim.ama bu sektörde olup da özellikle programlama sitesinde herkesin az çok ingilizcesi var ve jquery docs'u inceleyenlerin bir çoğunun da anlayacağı şekilde örnekli kodlar var. söylemenin nedeni bu daha farklı bir amaç güttüğümüzden değil.

/* daily news | Logmania | RockLies */
/* vectro | 05 Ocak 2010 10:00 */

Millet kafayı jQuery ile yemiş :)

Yakında jQuery ile nasıl ekmek yaparız, jQuery ile bu akşam nereye gidilir gibi yazılar da bekliyorum artık.

/* Renkli Dergi */
/* muratmoon | 05 Ocak 2010 12:55 */

türk milleti animasyon türü şeyleri sever. hareketli şıkır şıkır bişey görünce iş biter. flaş sitelere ülkemizde bu yüzden rağbet oldukça fazla değil mi zaten?

jQuery'de animasyonlara yeterince destek verdiğinden genetik olarak sempati duyuyoruz. eh efektten daha fazla kodlama kolaylığı sağlaması da tuz biber olunca jquery ile bebek yapmak isteyenimiz bile çıkar. doğamız bu bizim :))

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 05 Ocak 2010 14:24 */

lazaronnie ne alakası var kullanan sitelere bakmadın sanırım dünya çapında bir proje haline gelmiş. destek almış üstelik sadece animasyon için değil ajax, kolay ulaşım ve pluginleri ile açık kodu ile başarılı bir kütüphane. dünya bizden çok daha faydalı çok daha iyi kullanıyor. iş animasyon yapmak değil gerekli yerde gereği kadar kullanabilmekte.

/* daily news | Logmania | RockLies */
/* vectro | 05 Ocak 2010 16:55 */

@vectro senin dediklerini yanlış anlamış olabilirim kusura bakma ama diğer kişiler için dediklerim hala geçerli. sadece kodaman içinde değil aynı zamanda aktif olarak bildirgeçi de takip ediyorum aynı şey bildirgeç içinde geçerli... sadece yorum yazmak için yorum yazıyorlar yada reklam için.

/* mmacit | 05 Ocak 2010 21:41 */

@vectro işin gereği veya dünya trendleri umrumda değil ben milletimizin alışkanlıklarından bahsettim doğru veya yanlış. bu birincisi. hadi dalgınlığına geldi ayırt edemedin o anda diyelim;

yazdığım makalelere göz gezdirme zahmetine girersen flash kullanan sitelere bakıp bakmadığımı anlar ve gereksiz dialoglara girmemiş olursun. bu da ikincisi.

ben bu seferlik dalgınlığına vermekle birlikte benzer bir durumun tekrarı halinde muhalif yorum işini spor olsun diye yapanlardan biri olduğuna inanmaya başlayacağım haberin olsun. bu da üçüncüsü

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 05 Ocak 2010 21:58 */

Jquery candır ciğerdir,çok şey yapabilirsiniz kendisiyle. Resmi olmasa da jquery,dojo ve protoype birer endüstri standardı olmuşlardır. Öyle ki bir süre önce firefox ekibinin jquery,dojo,vs.. gibi js frameworkleri tarayıcıya gömmeyi ve internet sitelerine az da olsa veri trafiği(bandwith) konusunda naçizane bir şekilde destek olmayı bile düşünmüştür.Zaten jquery'i ortaya çıkaran John Resig'de Firefox'u geliştiren Mozilla'da çalışmaktadır.Ingilizce bilenler için kişisel sitesini tavsiye edebilirim.

@mmacit, evet herkes ingilizce bilmiyor ama bu işleri ileri seviyede yapmak istiyorlarsa bir şekilde öğrenmek veya ucundan kıyısından ingilizceye aşina olmak zorunda,uzun yıllardır teknolojinin ana dili ingilizce,şu an da öyle,uzun yıllarda böyle kalacağı düşünülüyor.Yani bir şekilde az çok ucundan kıyısından bile olsa öğrenilmesi gerekir. Öğrenmen gerekenleri türkçe kaynaklardan da öğrenebilirsin, ama gecikmeli bir şekilde öğrenirsin, çoğu alanda güncel türkçe kaynak(tutorial,kitap,makale vs..) bulmak zor olmaktadır, en az 3 veya 4 ay. Bu durum son yıllarda blogların artmasıyla 1 hafta ile 1 ay arasına indi.

/* lonelycavalry | 07 Ocak 2010 18:30 */

@mmacit, ingilizce bilmeyen biri zaten jquery.com a bakmaz Türkçe kaynaklarda aramak varken.
Daha iyisini yaz demişsin.Kendim yazdım.Buyur:
Sıfırdan jQuery öğrenmek isteyenlere
Sen http://docs.jquery.com/Effects i çevirmişsin.
Ben http://docs.jquery.com in büyük çoğunluğunu yorumladım.

/* http://protestit.org/ */
/* sundowatch | 17 Ocak 2010 19:18 */

yazını okumadım ama benimkinden daha iyiyse yeni öğrenenen arkadaşlara faydası dokunması bakımından sevinirim. benim burda kimseyle yarışma gibi bir gayem yok zaten burası da yarışma platformu değil benim gözümde... ben yazarım yararlanırlar bende olmayanı sen yazdıysan senden okur üstüne eklerler... ben burda sükse yapmak için yada para kazanmak için yazmıyorum sadece insanlar okusunlar faydalansınlar diye yazıyorum... eğer biri gelir yazıma olmadık şekilde çamur atmaya kalkarsa da o zaman daha iyisini yaz okusunlar derim... saygılar sunarım...

/* mmacit | 18 Ocak 2010 13:27 */

öğrenmek için eburhan'ın makaleleride çok çok iyi bir kaynak. Tavsiye ederim :)

/* burakdemirtas kisisel portföy */
/* BuKiDesign | 25 Ocak 2010 00:41 */

arkadaşlar bırakın tartışmayı; bilgisayar işine ilk başladığınız zamanları hatırlayın.Bu site değerli bir site ve devamlı kontrol altında; konsept dışı,faydasız bir yazı olsa zaten yöneticiler bunu yayınlamaz değilmi.

/* maydesign01 | 29 Ocak 2010 19:27 */

yayınlar, yayınladılar

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 29 Ocak 2010 22:08 */

az kod, çok iş = OOP :)

/* http://www.HakanDamar.com */
/* Hakan DAMAR | 08 Mart 2010 18:03 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork