Jquery ve Efekt Fonksiyonları

Jquery denince akla ilk gelen olgulardan biri de sanırım efektlerdir. Bu yazıda jquery ve efekt fonksiyonlarını yazmaya çalışacağım.

Efekt fonksiyonları Jquery’nin resmi sitesinde 4 gruba ayrılarak anlatılmış, bende o şekilde anlatmayı düşünüyorum. Gruplandırmaya bir göz atalım ;

  • Temel (Basic) Efekt Fonksiyonları
  • Karartma (Fading) Fonksiyonlar
  • Slayt (Slide) Fonksiyonları
  • Özel (Custom) Efekt Fonksiyonları

Hemen incelemeye başlayalım.

Temel (Basic) Efekt Fonksiyonları

hide Fonksiyonu : Seçilen elemanı gizler.

show Fonksiyonu : Seçilen elemanın görünmesini sağlar. Genelde gizlenmiş bir elemana uygulanır.

toggle Fonksiyonu : Seçilen elemanın hem gizlenmesini, hem görünmesini sağlar. Daha önceki yazılardan hatırlayacağınız gibi bu işlemi aynı fonksiyon bloğu içinde yapmaya yarar.

Temel efekt fonksiyonları ile ilgili bir örnek yapalım. Sayfamızda 3 farklı link bulunsun, birisi hide(), birisi show(), diğeri ise toggle() fonksiyonları ile yüklensin ve linklere tıklandığında efekt işlemi gerçekleştirilsin.

$("a.gizle").click(function(){
   $("div").hide("slow");
});
$("a.goster").click(function(){
   $("div").show("fast");
});
$("a.gizleGoster").click(function(){
   $("div").toggle(1000);
});

Örneği buradan inceleyebilirsiniz. Buradan da indirebilirsiniz.

Yukarıda örnekte temel efekt fonksiyonlarının içine slow, fast, 1000 gibi farklı parametreler aldığnı farketmişsinizdir. Bu şekilde kullanımın yanında, aşağıdaki gibi bir kullanım da mümkündür. Ayrıca bu durum tüm efekt fonksiyonları içinde geçerlidir.

$("a").click(function(){
   $("div").toggle("slow", function(){
      alert("Efekt İşlemi Başarılı !");
   });
});

Karartma (Fading) Fonksiyonları

Fading fonksiyoları, seçilen elementin şeffaflık özelliğini (opacity) kullanarak efekt işlemini gerçekleştirir.

fadeOut Fonksiyonu : Elementi şeffaflaştırarak gizler.

fadeIn Fonksiyonu : Opacity değerini 1’e yaklaştırarak gizlenmiş elementi gösterir.

fadeToggle Fonksiyonu : Seçilen element üzerinde opacity değerini her iki yöne (1’e ve 0’a) azaltarak ve artırarak elementi gizler ya da gösterir.

fadeTo Fonksiyonu : Elementin opacity değerini istediğiniz bir değere ayarlamanızı sağlar.

Bu fonksiyonlar ile iligi olarak küçük bir örnek yapalım. 4 farklı link ile fadeOut, fadeIn, fadeToggle ve fadeTo fonksiyonlarını kullanalım ;

$("a.gizle").click(function(){ $("div").fadeOut("slow"); });
$("a.goster").click(function(){ $("div").fadeIn("fast"); });
$("a.gizleGoster").click(function(){ $("div").fadeToggle(1000); });
$("a.ayarla").click(function(){
   $("div").fadeTo(300,0.3);
});

Sonuca buradan bakabilirsiniz, buradan da indirebilirsiniz.

Slayt (Slide) Fonksiyonları

Jquery slide fonksiyonları bir elementin görünüp gizlenmesini aşağıdan yukarıya doğru yapar.

slideUp Fonksiyonu : Bu fonksiyon seçtiğiniz elementi yukarı doğru slayt yapar.

slideDown Fonksiyonu : Aşağıya doğru slayt yapmak için kullanabilirsiniz.

slideToggle Fonksiyonu : İki yönlü slayt için kullanabilirsiniz.

Bu fonksiyonları kullanarak yukarıdaki örneklerle aynı formatta başka bir örnek yapalım.

$("a.slideUp").click(function(){
   $("div").slideUp("slow");
});
$("a.slideDown").click(function(){
   $("div").slideDown("fast");
});
$("a.slideToggle").click(function(){
   $("div").slideToggle(1000);
});

Sonucu buradan inceleyebiirsiniz, buradan indirebilirsiniz.

Özel (Custom) Efekt Fonksiyonları

Yukarıda efekt fonksiyonlarının en çok kullanılanlarını yazmaya çalıştım. Bu fonksiyonların dışında 3 farklı efekt fonksiyonu daha anlatmak istiyorum.

Jqueryde, animate fonksiyonu ile css özelliklerini kullanarak kendi efektlerimizi oluşturabiliyoruz. Özellikle vurgulamak istiyorum, css özelliklerini kullamak zorundayız. Ayrıca kullanılan css özelliğinin değeri sayısal olması gerekiyor. Yani arkaplanı maviyken, kırmızı yapamazsınız. Fakat genişliği 400px’den 500px’e çıkarabilirsiniz, çerçeve kalınlığını artırabilirsiniz, left ve top değerlerini değiştirebilirsiniz. Sayısal özelliklerle ilgili aklınıza ne geliyorsa yapabilirsiniz.

Biz küçük bir örnek yapalım, örneğimizde önce soldan 100 px ilerleyelim, sonra yukarıdan 100px ilerleyelim ardından da padding değerimizi artıralım.

$("div").animate({
   left : "100px" },"slow"); // Sola gittik
$("div").animate({
   top : "100px" },"slow"); // Aşağı gittik
$("div").animate({
padding : "50px" },"slow"); // Padding değerini arttırdık

Sonuca buradan bakabilirsiniz, buradan indirebilirsiniz.

Farkettiyseniz animasyonlar tek tek icra ettiler, hepsini aynı anda yapmak isterseniz şu şekilde kullanabilirsiniz ;

$("div").animate({
   left : "100px",
   top : "100px",
   padding : "50px"
},"slow");

Bir başka özel efetk fonksiyonu olan delay fonksiyonu ile gerçekleştirmek istediğiniz animasyonların gecikmeli olarak gerçekleşmesini sağlayabiliyorsunuz.

Mesela az önceki örneğimizin üzerinden gidelim ve animate fonksiyonunun linke tıklandıktan 1 saniye sonra gerçekleşmesini sağlayalım.

$("div").delay(1000).animate({
   left : "100px",
   top : "100px",
   padding : "50px"
},"slow");

Buradan inceleyebilir, buradan indirebilirsiniz.

Son olarak stop fonksiyonunu inceleyelim. Stop fonksiyonu ile icra etmekte olan bir animasyonu durdurabilirsiniz. Hemen görsel olarak da görmek için bir örnek yapalım ;

$("a.animate").click(function(){
   $("div").animate({
      left : "500px",
   },3000);
});
$("a.stop").click(function(){
   $("div").stop();
});

Evet sonuncu örneği de görmek için buraya tıklayabilirsiniz, indirmek için de buraya tıklayabilirsiniz.

Benim anlatacağım efekt fonksiyonları bu kadardı, dilerseniz siz jquery’nin resmi sitesindeki diğer efektlere de bakabilirsiniz.

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla