Haber başlıkları, duyurular ve daha bir çok aklınıza gelebilecek modül için jQuery tabanda yazılmış innerFade kütüphanesini kullanabiliriz.

Nelere ihtiyacımız var ?

Tabi ki tüm bu methodların çalışması için jQuery'nin bir kütüphanesine ihtiyacımız var. Resmi sitesinden son sürümü indirebilirsiniz. Ben halen 1.7.1 sürümünü kullanıyorum.
Bunun yanın da bir çok kod yazmaktansa bizim için hazırlanmış olan innerFade kütüphanesini kullanarak tüm bu işlemleri 6-7 satır kod ile yapacağız.

Speed - Timeout - Animationtype

Speed iki madde arasındaki geçiş hızını ayarlamamıza yardımcı olur 1000 milisecond invertal değeri bizim için yeterli.
Timeout ise bir maddenin ekranda kaç milisaniye duracağını ayarlamamıza ve animationtype de adından anlaşılacağı gibi animasyon tipini ayarlamamıza yardımcı olur. Bu sınıf 2 değer alabilir bunlardan biri fade diğer ise slide'dır.

Kütüphane ve İşleyiş

Öncelikle buraya tıklayarak gerekli olan innerFade kütüphanesini indirelim.
İşleyişe gelecek olursak, aşşağıda da gördüğünüz üzere css tarafında "ul" taglarını görünmez yapıyoruz.
HTML tarafında "ul" ve içersinde maddelerimizi oluşturacak olan "li" taglarını oluşturuyoruz. Her bir "li" tagı arasındaki bölüm bizim animasyon tipimize göre ve değişme süresine göre geçiş yapacak.

En işlev bölüm yani JS tarafta ise indirdiğimiz kütüphaneyi ekledikten sonra aşşağıda ki gibi bir kalıpta kodlarımızı aynen yazıyor sadece Speed,Timeout ve Animationtype parametrelerini kendimize göre değiştiriyoruz.
Tabi ki #(sharp) selectorunden sonra gelen kısma html tarafta kullandığımız "ul" tagının ID'sini giriyoruz.

JS Kodlarımız

Html Kodlarımız

Bir sonraki makalem de görüşmek üzere, esen kalın :)

H.Burak TUNGUT
Bilgisayar Mühendisliği Öğrencisi
www.buraktungut.com