JQuery ve Efektler
JQuery-tr Wiki sitesinden
Bu madde bir taslaktır. Bu maddeyi genişleterek katkıda bulunabilirsiniz.
- Basit Efektler
// Seçilen eleman gizlenir. $('div#metin').hide('normal'); // normal medium fast : bu parametreler efekt için gerçekleşme hızını belirler // Eğer hide() şeklinde hız belirtmeden kullanırsanız 'normal' hızda gizleme gerçekleşir. // Seçilen gizli eleman gösterilir. $('div#metin').show('normal'); // Seçilen eleman gizli ise gösterilir, görünür ise gizlenir. $('div#metin').toggle('normal');
- Kayma Efektleri
// Eleman yukarı doğru kayar ve gizlenir $('div#metin').slideUp('normal'); // normal medium fast : bu parametreler efekt için gerçekleşme hızını belirler // Eleman aşağı doğru kayarak görünür $('div#metin').slideDown('normal'); // O anki durumu tersine çeviren işlemi yapar. Gizle/Göster $('div#metin').slideToggle('normal');
- Şeffaflık Efektleri
Şeffaflık efektleri bir elemanın şeffaflık (opacity) değerini kullanarak görünürlüğünü değiştirir.
fadeIn() fonksiyonu görünmez bir elemanı, şeffaflık değerini yavaş yavaş arttırarak görünür yapar. fadeOut() fonksiyonu görünür bir elemanı, şeffaflık değerini yavaş yavaş azaltarak görünmez yapar. fadeTo() fonksiyonu ise şeffaflık değerini doğrudan belirlemek için kullanılır.
Not: Bir elemanın şeffaflık değeri 0 ile 1 arasında olabiliyor.
Örneğin:
// Görünürlük azalarak kaybolur $('div#katman').fadeOut('normal'); // Görünürlük artarak gelir $('div#katman').fadeIn('normal'); // Görünürlük oranı 0.3 (opacity 0-1) $('div#katman').fadeTo('normal', 0.3);
- Diğer/Özel Efektler
jQuery'de animate() fonksiyonu sayesinde özel efektler de tanımlayabiliriz.
// id'si buton olan elemana tıklandığında $("#buton").click(function(){ // özel animasyonu gerçekleştir. $("#katman").animate({ // elemanın genişliğini 150 piksel yap width: "150px", // elemanın şeffaflığını 0.4 yap. opacity: 0.4, // elemanın kenarlık kalınlığını 10 piksel yap borderWidth: "10px" }, 1500 ); });
Burada dikkat etmemiz gereken şey css özelliklerinin camel case olarak yazılıyor olması. Yani örneğin font-size için fontSize yazmalıyız.
Bütün efektleri deneyebilmek için oluşturulmuş bu sayfa http://ui.jquery.com/repository/real-world/effects/, konuyla ilgili referans olabilir.
Bunların yanısıra jquery efektleri eklentilerle genişletilip farklı şekillerde kullanlabilir.
