jQuery hover ve chlidren Metodu – Video Ders

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.

Ders içeriğinden notlar…

jQuery

[code lang="js"]
$(function() {
$('.wrap').hover(function() {
$(this).children('.front').stop().animate({ "top" : '300px'}, 700);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
[/code]

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

[code lang="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;
}
[/code]

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