JQuery Hover Efekti

CSS Notları
14 Kasım 2011
1.960 OKUNMA
6 YORUM
Facebook
Twitter
Google +

Css için çok güzel bir alternatif olan JQuery animate fonksiyonu  ile basit bir mouseover örneğini burada gösterelim.

Bu fonksiyona örnek olarak iki ayrı resim ayırdık renkli ve renksiz olmak üzere.

Head etiketi arasına önce jquery scriptini çağırıyoruz. Dosyayı indirmek için şuradan buyrun.

<script type='text/javascript' src='http://site.com/jquery.js'></script>

Kullanacağımız fonksiyonumuz da burada ;

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

</script>

 

Css Dosyamız ;

<style>
div.genel {
position: relative;
}

img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.b {
position: absolute;
left: 0;
top: 0;
}
</style>

 

Ana sayfada kullanacağımız iskeletimiz ise şu şekilde ;

<div class = "genel">
<!-- İlk olarak gösterilecek resim -->
<Img src = "ilk.jpg" alt = "" class = "a" />
<!-- Son olarak gösterilecek resim -->
<Img src = "son.jpg" alt = "" class = "b" />
</ div>

 

Facebook
Twitter
Google +

ÖNCEKİ YAZI

«

SONRAKİ YAZI

»

YORUMLAR

  1. Sezer Pamukçu

    teşekkürler işime yaradı.

  2. halil

    usta bu verdiğin kodlamalarla logomu yaptım sorun çıkmadı çalışıyor. ama ie8 de kötü gözüküyor nasıl düzeltebilirim? diğer tarayıcılarda problem yok.

    • y.emre Yazar

      ie kaynaklı bir sorun sizin yaşadığınız.Yani Sorun = Internet Explorer.
      %22lere kadar gerilemiş, ie6/ie7/ie8 için alternatif çözüm yollarından birisi, html5shiv

  3. halil

    önerinizi denedim ama düzeltemedi dosyayı indirdim dist klasörünü dosyarını attım koduda yazdım ama değişen hiç bişi olmadı. Dediğiniz gibi ie’nin kullanımı çok düşük. Ama kötü gözükmesi yinede beni rahatsız ediyo:) başka nasıl çözüm olabilir?

  4. ibrahim

    usta verdiğin indirme linki üyelik istiyor alternatif link koyarmısın

Yorum yaparak bu yazıdaki tartışmaya katılın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*
*