Merhabalar. Bu yazıda Jquery kullanarak nesnelere şeffaf belir (fade in) / şeffaf yok ol (fade out) efektinin nasıl verildiğini göstermeye çalışacağım.
Öncelikle belirtmek isterim, bu yazı başlangıç seviyesinde - ne nerede gibi sorular sormanıza gerek kalmadan basitçe anlatım içerir. Örnek kodlar vereceğim için jquery hakkında bilgi sahibi olmadan da bu efekti kolay biçimde hayata geçireceğiz.
Demo olarak benim kullandığım yan menüdeki "izlediklerim" ve "okuduklarım" kartlarını inceleyebilirsiniz. Farenizi bu kartların üzerine getirdiğinizde fade in ile ışık yanıyor, fareyi çektiğinizde ise fade out ile ışık sönüyor.
Oldukça basit olan bu işlem için mutlaka değişiklik yapacağınız dosyaların yedeklerini alın.
Efektlerimizin çalışabilmesi için jquery kütüphanemizin etiketinden önce çağırılması gerekiyor. Hali hazırda var ise bir sonraki aşamaya geçin, yok ise temanızın ana dizininde "js" adında bir klasör oluşturun ve*buradan*(sağ tıklayıp farklı kaydedin) indirdiğiniz jquery kütüphanesini bu klasör içine atın.
Daha sonra temanızda etiketinden önce olmak şartı ile ;
<script></script>kodunu yapıştırın.
Bu aşamada vereceğim kodu yine aynı şekilde çağırabilirsiniz ama ek sorgu yükü binmemesi için temaya gömmek daha iyi olacaktır.
<script>
$(document).ready(function() {
$('.buton').hover(
function() {$(this).children('.butonefekt').fadeIn('slow'); },
function() {$(this).children('.butonefekt').fadeOut('slow'); }
);
});
</script>
Kodunu yine etiketinden önceye yapıştırıyoruz. Bu kod ile buton div'inin içerisinde butonefekt div'ine fade in ve fade out efekti atadık.
Bu aşamadan sonra artık CSS ve PHP dökümü.
.buton {
width:167px;
height:88px;
background:url(images/1.png);
margin:auto;
margin-top:100px
}
.butonefekt {
width:167px;
height:88px;
background:url(images/2.png) no-repeat;
display:none
}
Burada önemli olan nokta CSS dökümünde .butonefekt div'i için belirlediğimiz "display:none" parametresi. Can alıcı nokta burası.
Önce div'imizi saklayıp mouse over ile görünmesini sağlıyoruz.
İşlemlerimiz bu kadar. Hayal gücünüzü katarak güzel işler çıkarabilirsiniz.
Ayrı olarak demo incelemek isteyen arkadaşlar buraya buyursunlar. Demoya ait dosyaları indirip incelemek isterseniz buradan dosyaları indirebilirsiniz.
