eburhan.com

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.

Gösterme ve gizleme efektleri ile ilgili örnekleri Örnek 1 sayfasında test edebilirsiniz.

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');

Slayt efektleri ile ilgili örnekleri Örnek 2 sayfasında test edebilirsiniz.

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. İş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. İlk ö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);

Şeffaflık efektleri ile ilgili örnekleri Örnek 3 sayfasında test edebilirsiniz.

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 görmek için Örnek 4A sayfasına bakabilirsiniz.

Ü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. Bir örnek için Örnek 4B sayfasına bakabilirsiniz.

Yazıda geçen örnekleri ise buradan indirebilirsiniz.

Yorum takibi   
Geri izleme   
Yazıyı Paylaş   
 23 Şubat 2008, 11:00
 Programlama
 Bugün 7 kez, toplam 1,765 kez okundu.
 css, efekt, jquery