Jquery Dersleri 2

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

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir