jQuery ile Animasyon Yapmak

Bir haftalık bir aradan sonra yeniden merhaba!

Artık blog sayfamda bu zamana kadar alışık olmadığınız, farklı konulara da değinmeye karar verdim. Bundan sonra elimden geldiğince jQuery ile ilgili makalelere yer vermeye çalışacağım, bu konu hakkında detaylı bilgiler vermeye özen göstereceğim. jQuery nedir ne değildir, bununla ilgili bir makale yazmadan evvel bugün okuduğum jQuery ile animasyon yapma ilgili olan bir makalenin çevirisini yapmaya çalıştım, onu yayınlıyorum. İşinize yarayacağını umuyorum. Anlatım hakkındaki sorularınızı yorum olarak ekleyebilirsiniz, elimden geldiğince daha çok detay vermeye çalışırım. Yazıyı alıntı yapmayı düşünürseniz lütfen kaynak göstermeyi ihmal etmeyin.

Yazar: Jeffrey Jordan Way , Çeviri: Mehmet Tahta

Bu konu jQuery kütüphanesinin animasyon özelliği üzerine yoğunlaşmış bir şekilde olacak. İlk başta basit Göster/Gizle metodu üzerinde yoğunlaşacağız, daha sonra da özel animasyon metodlarına geçeceğiz.

Show ve Hide Metodları ne iş yapar?

Belgeniz içerisinde öğeye “Hide()” metodunu uygulamak “none” olarak görüntülenmeye sebep olur. Aşağıdaki CSS ve jQuery parçaları özdeş fonksiyonlardır.

#someElement
{
display: none;
}

$(“#someElement”).hide();

Bu örneği sizin şekillendirebileceğinizden eminim. “Show()” metodu tekrar orijinal görünüme çevirmeye yarar.

#someElement
{
display: inline;
}

$(“#someElement”).show();

Show ve Hide metodları öğeleri canlandırır mı?

Evet veya hayır. Herhangi bir parametre olmadan animasyon olmaz. Fakat, eğer “Show” metodunu uyguladığımızda öğelerin yavaşca görünür olmasını istiyorsak? Bu durumda bunlar için “slow” kelimesini metodumuz içerisine eklemeliyiz. Örneğin..

$(“#someElement”).show(“slow”);

Bu kod çalıştığında öğe 6 sn içerisinde yavaşça görünür duruma geçecek. Hız parametresi için keyword veya spesifik uzunluk verebiliriz. Bunlar için “slow”, “normal” ve “fast” parametreleri kullanılabilir. (Bu ifadeler sırasıyla 6, 4 ve 3 saniyeyi ifade eder). Alternatif olarak, rakamları kullanarak hızı belirtebiliriz. Aşağıdaki örnekte olduğu gibi:

$(“#someElement”).show(1000);

Bu kod elementin bir saniyede görünür olmasını sağlar, veya 1000 milisaniyede. Şunu unutmayalım, keyword kullandığımızda tırnak işareti  kullanıyoruz. Ancak, spesifik olarak rakamlarla ifade ettiğimizde tırnak işaretini kullanmıyoruz.

“Show()” metoduyla alakalı harikulade bir şey ise aslında bütünüyle dijital kalıp kullanıyor olmamız. Bu metodla saydamlığı değiştirebiliyoruz, aynı zamanda yükseklik ve genişlik değerlerini de. Bir diğer animasyon metoduysa jQuery kütüphanesiyle, diğer taraftan, sadece spesifik özellik belirtmeyle yapılabiliyor.

FadeIn() ve FadeOut()

Fade metodu öğenin sadece saydamlığını değiştirmekle olur. FadeOut() öğenin saydamlığının spesifik periyotlarla azaltılmasıyla, onun tamamen görünmez olması süresince olur (display: none). FadeIn() ise bunun tamamen tersini yapar. Show ve Hide metodlarında olduğu gibi “slow”, “normal” ve “fast” olarak nitelendirebilme imkanımız vardır. Şu örneği inceleyin, ardından kaynağı tekrar gözden geçirin.

$(document).ready(function()
 {
  $("#someId").click(function()
 {
 $(this).fadeOut("slow");
 });
});

İşte burada belgenin hazır konuma geldikten sonra neler yapacağı belirtilmiş. “someId” anchor tagına tıklandığı zaman yavaşça gözden kaybolacak..

slideUp() ve slideDown()

Slide(Kayma) metodları öğenin yüksekliğinin değiştirilmesiyle olur. “slideDown” metodunu kullandığımızda, öğe görünür hale gelecek ve yukardan aşağı doğru belirtilmiş boyuta gelene kadar kayacak. Her zamanki gibi bu parametrede rakamlar veya keyword kullanabiliriz. Diğer örneklerde belirtildiği gibi.

Özel Animasyonlar

Birçok durumda animasyonarınız üzerinde daha büyük bir kontrol sağlamaya ihtiyaç duyarsınız. Bu tip durumlarda çekirdek animasyon sizin ihtiyaçlarınızı karşılamaz. Şimdi biraz daha ileri düzey özel animasyonlar yapmaya değinelim.

Öğeyi sayfa boyunca karşıdan karşıya sürüklemek

Bu basit örnekte öğenin üzerine tıklandığında sayfanın bir ucundan diğerine geçiş yapmasını sağlayacağız. Örneği inceleyin. Boş bir html sayfamızın olduğunu ve “theImage” olarak taglanmış bir imaj olduğunu farzedelim. Öncelikle CSS dosyamızı ayarlamalıyız.

#theImage
{
position: relative;
}

İmajı hareket ettirmek için “left” özelliğini değiştireceğiz. Ancak öğe mutlaka “top”, “left”, “bottom” ve “right” olarak pozisyonlandırılmalıdır. Şimdi jQuery ekleyelim.

$(document).ready(function(){
 $("#theImage").click(function()
  {
   $(this).animate
    ({left: "400px"}, 3000);
   });
  });

İşte burada click event (tıklandığında yapılacak olayı) oluşturuyoruz imajımız için. Ardından da “animate” metodunu kullanıyoruz.

Animasyon metodu için doğru söz dizimi: .animate({property: “value”}, speed, callbackFunction);.

İmajı sağa doğru 3 saniye(veya 3000 milisaniye) içerisinde 400piksel gidecek şekilde ayarladık.

Çoklu Animasyon

Son örneğimiz üzerine biraz çalışma yapalım. Şimdi imajımızın sağa doğru kaymasını ve yüksekliği kadar artmasını istiyoruz. Aşağıdaki örnekteki gibi mi yapmalıyız?

$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
width: “300px”
}, 3000);

Cevap: Hayır. Eğer yapmak istediğimiz şeye tekrar göz atarsanız imajın sağa doğru kaymasını ve bu işlemin bitmesinin ardından imajın genişliğinin 300px olmasını sağladık. Bu yolla kod doğru bir şekilde yazılmamış oldu, bu kodlarla iki animasyon eş zamanlı olur. Yani imaj sağa doğru kayarken, yüksekliği de aynı anda değişir. Peki biz animasyonlarımıza nasıl “kuyruk”(sıralama) ekleyebiliriz?

$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
}, 3000);
$(this).animate
){
width: “300px”
}, 3000);

Şimdi iki animasyonu ayırmış olduk. Öğenin “width” (yükseklik) kısmı “left” işlemi(sağa doğru kayma) tamamlanmadan değişmeyecek. Bu “kuyruklu animasyon” veya “zincirleme” olarak adlandırılır.

Öğrendiklerimizi Birleştirelim

Örneği inceleyiniz.
Bir sonraki örnekte imaja tıklandığında imajı sağa doğru kaydıracağız ve saydamlığını %10’dan %100’e getireceğiz. Animasyon tamamlandığında imajın 3 saniye içerisinde gözden kaybolmasını sağlayacağız. Öncelikle CSS dosyamızı düzenleyelim.

#theImage
{
position: relative;
display: none;
}

Öğe, “left” özelliğinin belirtilmesinden sonra nispeten pozisyonlanmaya ihtiyaç duyar. Ayrıca görünümün de yavaşca kaybolmasını istiyoruz, öyleyse aşağıdaki şekilde kullanmamız gerekecek.

$(document).ready(function(){
 $("#theImage").css("opacity", ".1");
 $("#theImage").click(function()
  {
   $(this).animate
    ({left: "400px", opacity: "1"}, 3000, function()
     {
      $(this).fadeOut(3000);
     }
    );
 });
 });

.CSS zincirlenemez!

Eğer imaj kaydırılır ve görünür hale getirilirse (saydamlığı arttırılırsa) css dosyamızı şu şekilde düzenlememiz gerekir..

.css(“border”, “5px solid red”);

Maalesef istediğiniz cevabı alamayacaksınız. CSS dosyası diğer animasyonların bitmesini beklemeden değişecek. O zaman nasıl zincirleme yapacaksınız? Cevap: “callback” fonksiyonunu kullanarak. İşte gözden geçirilmiş kodumuz.

$(document).ready(function(){
 $("#theImage").css("opacity", ".1");
 $("#theImage").click(function()
  {
   $(this).animate
    ({left: "400px", opacity: "1"}, 3000, function()
     {
      $(this).css(“border”, “5px solid red”);
      $(this).fadeOut(3000);
     }
    );
 });
 });

Callback fonksiyonu, fonksiyonların efektin tamamlanmasının ardından gerçekleşmesini bildirmenizi sağlar. Bunların hepsi jQuery efekt metodlarında belirlenmiştir.

$(“#someElement”).slideDown(“normal”, function()
 {
  ...bazı kodlar buraya
 });
);

Bu kod “someElement” id’li öğenin bulunmasını sağlar. Bulduğunda, öğenin normal hızda (4 saniye) tüm yüksekliği boyunca kaymasını sağlar. Animasyon tamamlandığında ise fonksiyon harekete geçer.

Çeviri işi gerçekten zor bir iş. Elimden geldiğince titiz olmaya özen gösterdim, umarım anlayabileceğiniz bir anlatım olmuştur. Bundan sonra vakit buldukça bu tarz güzel makaleleri sizlerle paylaşmaya devam edeceğim. Anlatım ile ilgili sorularınız olursa yorum olarak ekleyebilirsiniz, elimden geldiğince yardımcı olmaya çalışırım.

Mehmet.