jQuery serisinin ilk yazısı olan jQuery dünyasına adım atıyoruz başlıklı yazıda jQuery kütüphanesinin hem javaScript, hem AJAX, hem de bir efekt kütüphanesi olduğunu belirtmiştim. Bu yazıda ise jQuery ile web sayfalarımıza zenginlik katan efekt işlemlerinin nasıl yapılabileceğinden bahsedeceğim. Hem bizlere sunulan hazır fonksiyonları, hem de kendi efektlerimizi nasıl yapabileceğimizi anlatmaya çalışacağım.

Öncelikle yazı başlıklarına bir gözatalım:

1. Gösterme ve gizleme efektleri
2. Slayt efektleri
3. şeffaflık efektleri
4. Özel efektler

1. Gösterme ve gizleme efektleri

Gizli bir elemanı görünür kılmak, görünür bir elemanı gizlemek için kullanabileceğimiz efektlerdir. Bu efektleri kullanabilmemizi sağlayan fonksiyonlar show(), hide() ve toggle() fonksiyonlarıdır. show() fonksiyonu ile gizli bir elemanı gösterirken, hide() fonksiyonuyla da görünür bir elemanı gizliyoruz. toggle() fonksiyonu ile de gösterme ve gizleme efektlerinin aynı anda gerçekleşmesini sağlayabiliyoruz.

// gizle
$('div#metin').hide('normal');
// göster
$('div#metin').show('normal');
// gizle/göster
$('div#metin').toggle('normal');

Yukarıdaki fonksiyonlarla ID özniteliği "metin" olan bir DIV elemanı üzerinde gösterme ve gizleme efektlerini uygulamış oluyoruz. Fonksiyonlarda kullanılan normal ifadesi, efekt işleminin hızını belirtiyor. Eğerki "slow" ifadesi kullansaydık efekt yavaş, "fast" ifadesi kullansaydık hızlı bir şekilde gerçekleşecekti. Ayrıca bu efekt fonksiyonlarına "milisaniye" cinsinden değer de atayabilirsiniz. Örneğin $('div#metin').hide(350); gibi… Böylece bu efekt, 350 milisaniye hızında etkili olacaktır.

2. Slayt efektleri

Slayt efektleri de bir elemanın görünürlüğünü değiştirirler. slideDown() fonksiyonu ile gizli bir elemanı, yükseklik (height) değerini yavaş yavaş arttırarak görünür kılıyoruz. Bunun tam tersi mantıkta çalışan slideUp() fonksiyonuyla ise görünür bir elemanı, yükseklik (height) değerini yavaş yavaş azaltarak gizlemiş oluyoruz. Bir de bu iki efekti aynı anda uygulamak için kullandığımız slideToggle() fonksiyonu var.

// gizle
$('div#metin').slideUp('normal');
// göster
$('div#metin').slideDown('normal');
// gizle/göster
$('div#metin').slideToggle('normal');

3. şeffaflık efektleri

şeffaflık efektleriyle bir elemanın şeffaflık (opacity) değerini kullanarak görünürlüğünü değiştiriyoruz. fadeIn() fonksiyonu ile gizli bir elemanı, şeffaflık değerini yavaş yavaş arttırarak görünür kılıyoruz. Bununla ters mantıkta çalışan fadeOut() fonksiyonuyla ise görünür bir elemanı, şeffaflık değerini yavaş yavaş azaltarak gizlemiş oluyoruz. Bunların yanında bir de fadeTo() isimli özel bir fonksiyon daha var. Bu fonksiyonun görevini alttaki paragrafta bulabilirsiniz.

Bir elemanın şeffaflık değeri 0 ile 1 arasında olabiliyor. şeffaflık değeri 0′a yakın olan eleman gizleniyormuş gibi algılanırken, şeffaflık değeri 1′e yakın olan bir eleman ise görünür olarak algılanır. Bu iki değer arasında oynamalar yaparak çeşitli efektler oluşturabiliriz. işte fadeTo() isimli fonksiyon da bir elemanın şeffaflık değeri üzerinde oynama yapabilmektedir. Bu fonksiyonu $('div#metin').fadeTo('normal', 0.5); şeklinde kullanabiliriz. ilk önce "normal" parametresi ile efektin gerçekleşme hızını, daha sonra da elemanın "yeni şeffaflık değeri" belirtmiş oluyoruz.

// gizle
$('div#metin').fadeOut('normal');
// göster
$('div#metin').fadeIn('normal');
// şeffaflığını 0.5 yap
$('div#metin').fadeTo('normal', 0.5);

4. Özel efektler

Aslında buraya kadar anlattığımız bütün efektler, bir elemanın bazı CSS özellikleri üzerinde oynamalar yapılarak oluşturuluyorlar. Öyleyse biz de herhangi bir elemanın bazı CSS özelliklerini değiştirerek yeni efektler/animasyonlar oluşturabiliriz. Peki, bunu nasıl yapacağız? Cevap animate() fonksiyonunda 

animate() fonksiyonuna öncelikle bir elemanın yeni CSS özelliklerinin ne olması gerektiğini belirtiyoruz. Daha sonra da bu değişikliğin hangi sürede gerçekleşeceğini giriyoruz. Gerisini animate() fonksiyonu hallediyor. Bu fonksiyonda dikkat etmeniz gereken tekşey, kullandığınız CSS özelliklerinin sayısal olarak arttırılabilir olmasıdır. Örneğin height:15px benzeri bir özellik sayısal olarak arttırılabilmesine karşın (15px, 25px, 55px… gibi), color:'red' benzeri bir özellik sayısal olarak arttırılamaz.

$('div#metin').animate({
width: '450px',
padding: '25px',
fontSize: '16px'
}, 3000 );

Bu örnekte ID özniteliği "metin" olan DIV elemanının width, padding ve fontSize özelliklerini değiştirmiş olduk. Ve bu değişimi 3000 milisaniyelik bir zaman dilimi içerisinde yaptık. Yani kendi efektimizi oluşturmuş olduk Hazırladığımız bu efekti

Üstteki örnekte efektin gerçekleşme süresi 3000 milisaniye idi. Bazı zamanlar, efektin gerçekleşmesini durdurmak isteyebilir, yani 3000 milisayenin dolmasını beklememek isteyebiliriz. Böyle bir bir durumda animate() fonksiyonunun çalışmasını stop() isimli başka bir fonksiyon ile durdurabiliyorsunuz. Bu fonksiyonu $('div#metin').stop(); şeklinde kullanabilirsiniz.