Bazı image gallery’lerde veya lightBox diye piyasaya sürülen javascript aparatlarında sık sık rastladığımız bir efekt vardır. Hani şu yavaşça opaklığı artın resim ya tamamen kaybolur ve hemen ardından bir sonraki resim aynı yavaşlıkla opaklık arttırarak (0’dan başlayıp) sahneye gelir yada ilk resim kaybolurken aynı anda altında duran resim git gide belirginleşir vs vs.. Çeşitli yöntemler mevcut ama nasıl yapılacağını hiç düşündünüz mü? Hazır library’lerde çok basit bir şekilde ve türlü olaylar (event) karşısında cevap verebilecek şekilde bu özellik verilebiliyor. Ama nedir bu hadisenin mantığı? Derhal aktaralım efem!..var kontur = 0;var timeOut;function opakOut(yer,hiz){if(kontur>0){hiz = hiz * 1000var yer = document.getElementById(yer);mozOp = kontur * 0.01;yer.style.opacity = mozOp;yer.style.filter = “alpha(opacity=”+kontur+”)”;kontur–timeOut = setTimeout(“opakOut(“+yer+”,”+hiz+”)”,hiz);}else{clearTimeout(timeOut);}}

Öncelikle ilk bloktaki javascript kodumuzda bir hususu belirtmek isterim.. Resimlere opak efekti vermeyi tarayıcı program sağlar. Bu olanağı da javascript ile tetikleriz. Ama her tarayıcının tetikleme kodu malesef aynı değil (bıktırdı bı standartlaşamama) Bu durumda siz eğer yukarıdaki kodları firefoxta deneyecekseniz yer.style.opacity = mozOp; kısmını explorer için yer.style.filter = “alpha(opacity=”+kontur+”)”; kullanacaksınız. Diğer browserlar için de az araştırmayla hangi sentax geçerli olduğunu bulabilirsiniz. (amaç mantık sunmak)Sayfaya eklediğiniz resime tıkladığınızda resim yavaşça ekrandan silinip gidecektir. Çoğu yerde olduğu gibi burada da işin özü setTimeout fonksiyonundan faydalanıldığını sanırım fark ettiniz.. Anlatacaklarım bu kadar. Geliştirip kullanmak size bağlı..Saygılar..