FadeTo gorselliğe onem veren webtasarımcılar icin artık vazgecilemeyecek bir elementdir.

fadeTo ne işi yapar ?

Hepimizinde css ’deki vazgecemeyeceğimiz opacity elementinin jQuery kutuphanesinde yazılmış ve animasyonlu halidir. Tum tarayıcılarda sorunsuz bir şekilde calışır ve ziyaretcilerimiz efekti anlayamazlar ama cok hoşlarına gidecektir. fadeTo elementini kullanmak cok basit sadece hangi bolgedeki resimlere efekt verebileceğimizi jQuery dosyamızda belirteceğiz bu arada herkez jquery.js dosyasını index.html ’sine entegre edeceğini biliyordur.

Oncelikle html dosyamızı yazıyoruz.
Kod:
[h=1]Mahşet Haberler[/h]

Html kısmında h1 yani başlığımızı koyduk sonra bir .MahsetHaberIcerik diye bir div oluşturduk ve icine listemizi koyduk.

Şimdi Css dosyamızı yazalım.
Kod:
.MahsetHaber .MahsetHaberIcerik .MahsetHaberIcerik ul .MahsetHaberIcerik ul li

Css kısmında MahsetHaber ile h1 tagımızın ozelliğini belirledik .MansetHaberIcerik kısmında div ’imizin boylarını belirledik sonra ul ve li ’leri tanımladık.
Şimdi jQuery komutlarımızı yazalım
Kod:
$(document).ready(function () ) function ResimGoster (ResimId) function ResimKapat (ResimId)

Js kısmında (en onemli kısım) burada
Kod:
$(document).ready(function () )

Sayfa yuklendiğiden şunları yap
Kod:
$('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

.MahsetHaberIcerik divinin icindeki ul ’un icindeki li ’nin icindeki img yani resimleri bul ve opacity değerini 0.50 yap.
Kod:
function ResimGoster (ResimId)

Resimlerin ustune geldiğinde ustune gelen resimin id ’sini al ve opacity değerini 1 yap.
Kod:
function ResimKapat (ResimId)

Resimlerin ustune geldiğinde ustune gelen resimin id ’sini al ve opacity değerini 0.50 yap.

Js dosyamızında nasıl calıştığını anlattım.

Komple Html dosyamız.
Kod:
Aycan.Net fadeTo *********** ********** $(document).ready(function () ) function ResimGoster (ResimId) function ResimKapat (ResimId) *********** [h=1]Mahşet Haberler[/h]

Demo sayfası icin tıklayınız : jQuery fadeTo

####################
Bu makale AycanB tarafından Aycan.net yazılmıştır. Link gostermeden yayımlamak YASAKTIR.
jQuery fadeTo | Aycan.net
####################