jQuery hover ve chlidren Metodu – Video Ders

17 Mart 2010

http://zingocan.com/wp-content/uploads/jqueruy.png
[ad]
Dünkü dersimizde jQuery‘de hover metodunu kullanarak resmimizin ÅŸeffaflık ayarlarının, mouse hareketi ile deÄŸiÅŸmesini saÄŸladık.

Bugün bizden istek derste bulunan ahmet eren arkadaşımız; Resimlerin üzerine gelindiğinde yeni bir resim oluşturabilmemiz için ne yapmamız gerekiyor dedi.. Dersimizde kısaca bunu anlattım.

http://zingocan.com/wp-content/uploads/demo1.pnghttp://zingocan.com/wp-content/uploads/download.pnghttp://zingocan.com/wp-content/uploads/videoizle.png

Ders içeriÄŸinden notlar…

jQuery

$(function() {
 $('.wrap').hover(function() {
 $(this).children('.front').stop().animate({ "top" : '300px'}, 700);
 }, function() {
 $(this).children('.front').stop().animate({ "top" : '0'}, 400);
 });
 });

Yukaruda belirttiÄŸimiz jQuery kodlarımızda, .wrap adlı nesnelerin hover metoduyla (yani mouse pozisyonu) yeni bir fonksiyon oluÅŸsun istedik.. Bu fonksiyonumuzda ilk defa karşılaÅŸtığımız bir kod olan clihdren ‘ ı çağırdık. chlidren kalıbı ile devam eden bir animasyon oluÅŸturduk, animasyonumuz belirlediÄŸimiz resimi 300px aÅŸağı indirdi, daha sonra fonksiyon biterken aynı yerini aldı

CSS

#container {
width: 850px;
text-align: center;
margin: auto;
}

.wrap {
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}

img {
position: absolute;
top: 0; left: 0;
}

CSS bölümümüzde bir kaç koddan bahsedeceğim.

overflow: hidden; ile animasyon atadığımız resmin kaybolmasını istedik..

float: left; ile resimlerin sağa dayalı durmasını sağladık

padding: 0 1em; ile resimler arasındaki boşluğu belirledik

————–

Ahmet kardeşim, yararlı olabildiysek ne mutlu.. Bir daha ki derste görüşmek üzere..

DiÄŸer Video Dersleri

Ders 1- jQuery Başlangıç

Ders 2 -Fade, Slide hide -show Metodları

Ders 3 -Animate Metodu

Ders 4 – Varyasyon OluÅŸturma

Ders 5 -  toggle ve toggleClass Metodları

Ders 6 -  jQuery Slidedown Metodu Kullanımı

Ders 7 -  jQuery Dersleri: hover() Metodu

Ders 8 -  jQuery hover ve chlidren Metodu

Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme

Lutfen Soru ve sorunlarınız hakkında, iletişim bölumunu kullanmak yerine yorum yapınız!

Etiketler: , , , , , , , , , , , ,



Yukarı

Geri Bildirimler

  1. [...] Ders 8 – jQuery hover ve chlidren Metodu [...]

  2. [...] Ders 8 -  jQuery hover ve chlidren Metodu [...]

  3. [...] Ders 8 -  jQuery hover ve chlidren Metodu [...]

  4. [...] Ders 8 -  jQuery hover ve chlidren Metodu [...]

  5. [...] Ders 8 -  jQuery hover ve chlidren Metodu [...]

  6. [...] Ders 8 -  jQuery hover ve chlidren Metodu [...]

  7. [...] Ders 8 -  jQuery hover ve chlidren Metodu [...]

  8. [...] Ders 8 -  jQuery hover ve chlidren Metodu [...]

Yorum Bırak