web-programlama

Öntanımlı olarak jQuery, animasyonlar için kuyruk işlevselliği ile gelir. Bu işlevselliğin anlamı şudur: Peşi sıra çok sayıda animate() çağrıları yapılırsa, jQuery bir iç kuyruk oluşturur. Böylece animate() çağrılarını birer birer gerçekleştirir.

Eğer farklı animasyonları peş peşe gerçekleştirmek istiyorsanız, kuyruk işlevselliğinden yararlanabilirsiniz:

+= ya da -= sembolleri yardımıyla parametre değerleri o andaki değerlerine ekleme ya da çıkarma yapılarak bağıl biçimde tanımlanabilir.

Aşağıdaki jQuery kodu bununla ilişkilidir:

Aynı anda çok sayıda özellik animasyona katılabilir. Aşağıdaki örnekte konum, büyüklük ve saydamlık değiştirilerek dikdörtgen şeklindeki nesne BAŞLA düğmesiyle hareket ettirilmektedir:

Örneğimizi dikkatle inceleyelim:

jQuery animate() metodu, kullanıcının kendi animasyonlarını sağlamasına olanak verir.

Yazılış biçimi:

$(seçici).animate({parametreler},hız,geriçağırma);

Kullanımı zorunlu olan parametreler, anime edilecek CSS özelliklerini tanımlar. Kullanımı isteğe bağlı olan hız parametresi, efektin süresini belirler; "slow" (yavaş), "fast" (hızlı) ya da milisaniye değerlerinden birini alır. Yine kullanımı isteğe bağlı olan geriçağırma (callback) parametresi, animasyon tamamlandıktan sonra çalıştırılacak bir fonksiyondur.

slideToggle() metodu, slideUp() ve slideDown() metotlarının peş peşe uygulanmasını sağlar. Parametreler ve kullanılış biçimi bu iki metot ile aynıdır.

Aşağıda slideToggle() örnek HTML5 kodunu inceleyebilirsiniz:

slideDown() metodunun tamamen tersi bir işlev görür; bir elemanı yukarıya doğru götürür. Parametreler ve kullanılışları slideDown() ile aynıdır.

Aşağıdaki slideUp() örnek HTML5 kodunu dikkatle inceleyiniz:

Bir elemanı aşağıya doğru kaydırmak için kullanılır.

Yazılış biçimi:

$(seçici).slideDown(hız,geriçağırma);

Kullanımı isteğe bağlı olan hız parametresi, gizleme/görüntüleme hızını belirler ve birimi "slow" (yavaş), "fast"(hızlı) ya da milisaniye türündedir. Kullanımı yine isteğe bağlı olan "geriçağır" parametresiyse, kaydırma olayı tamamlandığı zaman çalıştırılacak bir fonksiyondur.

slideDown() örnek HTML5 kodunu aşağıda inceleyebilirsiniz:

jQuery kaydırma metotları yardımı ile elemanları yukarı ve aşağıya doğru kaydırabilirsiniz.

jQuery aşağıdaki kaydırma metotlarına sahiptir:

• slideDown()
• slideUp()
• slideToggle()

fadeTo() metodu ile saydamlığı (opacity) 0-1 arasında değiştirerek farklı saydamlıkta görünümler oluşturabilirsiniz.

Yazılış biçimi:

$(seçici).fadeTo(hız,saydamlık,geriçağırma);

Kullanımı isteğe bağlı olan hız parametresi, gizleme/görüntüleme hızını belirler ve birimi "slow" (yavaş), "fast"(hızlı) ya da milisaniye türündedir. Kullanımı yine isteğe bağlı olan "geriçağır" parametresiyse, fadeTo() fonksiyonu tamamlandığı zaman icra edilecek bir fonksiyondur.

Örnekte bu metodun kullanımını görebilirsiniz:

fadeToggle() metodu, fadeIn() ve fadeOut() metotları arasında gidip gelme olanağı sağlar ve bu metotlar sırayla çalıştırılır. Elemanlar görünür ve görünmez durumlar arasında geçiş yapar.

Yazılış biçimi:

$(seçici).fadeToggle(hız,geriçağırma);

Kullanımı isteğe bağlı olan hız parametresi, gizleme / görüntüleme hızını belirler ve birimi "slow" (yavaş), "fast" (hızlı) ya da milisaniye türündedir. Kullanımı gene isteğe bağlı olan "geriçağır" parametresi ise, gizleme olayı tamamlandığı zaman çalıştırılacak bir fonksiyondur.