Jquery Dersleri Serisi 2 (Slide – Animate Kullanımı)

Jquery derslerimizin ikinci yazısıyla karşınızdayım. Aslında üçüncü yazı baştaki tanıtım yazımızı da sayarsak! Ardından fonksiyonları kavramak amacıyla ilk ders yazımızı yazmıştık. Şimdi Jquery Dersleri 2 yazımızda biraz daha animasyon odaklı bir çalışma yapacağız.

Bu arada güncel jsfiddle dosyam ve yaptıklarımızı canlı ön izlemek için buraya tıklayın.

Hover nedir?

Css bilenlerin de bildiği gibi hover dediğimiz fonksiyon, nesnenin üzerine faremizi getirince bir takım değişmeler olmasıdır. Genelde menüler için veya daha şık tasarımlar yapmak için kullanıyoruz. Örnek olarak .hover(); metodu kısmında göreceksiniz. Öncelikle bugün neleri göreceğiz?

  • Hover Metodu
  • Slide Up Metodu
  • Slide Down Metodu
  • Slide Toggle Metodu
  • Animate Metodu

.hover(); Metodu: yukarıda da söylediğimiz gibi nesnenin üzerine gelince değişim sağlıyordu örnek olarak

Göründüğü üzere de div5’imizin üstüne gelince rengi değişiyor. Hazır değinmişken iki fonksiyonun nasıl kullanıldığını da inceleyerek görebilirsiniz.

Slide Metotları: Bir önceki yazımızda show(); ve hide(); metotlarını görmüştün onların daha efektli olarak yapılmasını sağlayan bu metotlar sayesinde daha güncel bir tasarıma sahip olacaksınız.

.slideUp(); Metodu: Açık bir şekilde gözüken nesneyi bu metot ile şık bir şekilde yok edeceksiniz. Örnekte de göreceksiniz zaten açıklamadan kodunu da yazayım. 😀

.slideDown(); Bu ikisini bir arada verdim çünkü ikisi birini yapınca diğerini yapmayınca eksik hissediyorum 😀

.slideToggle(); Metodu: Yukarıda up ve down metotlarını bir arada kullanınca eksik hissettiğimden bahsettim. Bu eksikliği yok etmek için beni düşünen jquery kütüphanesi slideToggle metodunu yapmışlar. Up olmadan Down, Down olmadan Up olmuyor. (Not: ilk fonksiyon çalışır ama) Fakat Toggle etiketinde böyle bir dert yok nesnenin olup olmamasına göre up veya down yapıyor.

Kodumuz bu zaten canlı olarak jsfiddle dosyamdan da inceleyebiliyorsunuz.

Sonunda geldik en sevdiğim yere Jquery kütüphanesindeki en güzel en kullanışlı en sempatik en cool metot, animate metotu! Css bilen kişiler için bir nesneye her şeyi yaptırabilirsiniz. Örneğin Margin-left:10px yani sol taraftan 10px sağ yana git demektir değil mi? Öyledir! Bunu animate ile yapınca margin default değerinden istediğin değere oynayacaktır. Css kodları ile boyut, renk vs. her şeyi ayarlayabiliyorsunuz. Örnek olarak ve jsfiddle dosyamdan bakarak daha iyi anlayabilir. Daha çok sevebilirsiniz.

.animate(); Metodu:

kullanımı bu şekilde (not: callback hiç kullanmadım o yüzden direk adını yazdım :D)

Örnek olarak animate1 adlı butonumuza basarak img1 isimli resmimizi sağa götürüp boyutu ve opaklığı ile oynadık (alan dar olmadığı için herhalde yeri değişmedi.)

Jquery Dersleri Serisi 1 (Fonksiyonları Kavramak)

Selamlar, yazıma başlamadan önce bir durumu izah etmem gerekiyor. Bu yazıyı aslında sabah bitirmiştim fakat taslaklara kaydetmiştim. Yayınlamak için girdiğimde nedense silindiğini gördüm. Veritabanı içinden vs. yaptığım araştırmalar sonucunda yazıyı bulamadım ve ikinci defa yazıyorum. (her ders 10 konu olacaktı fakat bugün sadece jsfiddle dosyamdakileri aktaracağım.)

Jquery 1 (Fonksiyonları Kavramak)

Bir önceki konumda bu projeden bahsetmiştim. Ayrıca Jquery ve Javascript gibi konuların açıklamasını basit olarak nasıl kullanıldığını vs öğretmiştim. Şimdi hazırladığım birkaç metodu birinci ders olarak sizlere aktaracağım. Bu konuda bahsedeceğimiz konular;

  • Click Metodu
  • Fonksiyon işlemleri
  • CSS Metodu
  • Attr – Revomeattr Metotları
  • Hide – Show Metotları

(Aslında bu konu daha uzundu ama silindiği için ve bunlar hazır olduğu için günü de yazısız geçirmek istemiyorum şimdilik bunları anlatacağım.)

Öncelikle yazılardaki örnekleri takip etmek için bu sayfadan jsfiddle dosyama ulaşabilirsiniz.
.click(); Metodu: Tıklama yaptırma fonksiyonudur fakat, bir işlevi yerine getirmek için fonksiyon metodunu kullanıyoruz.

Fonksiyon İşlemleri: Örneğin click, hover gibi kullanımı da şöyle olmaktadır.

Şimdi örneklerimizle detaylı olarak açıklayalım.

.css(); Metodu: Nesnelerimize fonksiyonla (veya fonksiyonsuz) CSS özellikleri atar.

Div1 classlı divimize tıklayarak this (bu nesne olarak kullanılır “div1” yazsaydık da aynı anlamda olurdu.) nesnesini yani aynı divin arka plan rengini değiştirdik.

css metodunu süslü parantezler içine alarak, birden fazla özellik ekleyebiliriz.

.attr(); Metodu: Css’den farkını açıklamak biraz zor ama şöyle diyebiliriz. Örneğin nesne özelliklerini cssden değil de direk html koddan değiştiriyorsunuz. Bu durumda attr metodunu kullanmanız gereklidir.

Div2 nesnemize tıklayarak div2’nin içindeki resmin boyutunu 36px yaptık. (Css’den şöyle ayırabiliriz örneğin <a> etiketlerinde href=”jquery.com” özelliği css özelliği değildir. Html özelliğidir. Attr bu gibi özellikleri değiştirmeye yarar.)

.removeAttr(); Metodu: attr ile eklediğimiz özellikleri iptal eder.

Biraz önce div2 içindeki resmimizin boyutuyla oynamıştık. Şimdi duzelt classlı butonumuza basarak bu özelliği de-aktif edeceğiz.

.hide(); Metodu: Hide anlamındaki gibi gizleme işlemleri gerçekleştirir. Animasyonlu gizlemeyi vs. bir sonraki yazımızda göreceğiz.

yoket classlı butonumuza basarak div3’ü gizledik.

.show(); Metodu: Gizlediğimiz veya gizlenen nesneleri tekrar göstermeye yarar.

div3’ümüz gizlenmişti! Fakat şimdi getir classlı butonumuza basarak gizlenen divi geri çağırdık.

Jsfiddle dosyamı buraya da çektim fakat WordPress içinde nedense çalışmadı yine de kalsın 🙂