jQuery hover ve chlidren Metodu – Video Ders

[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.

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: animasyon, Css Code, Fonksiyon, jQuery, jquery hover metod, jquery methods, jquery metod, jquery öğreniyorum, jquery video, Jquery Video Dersleri, Js, Mutlu, Overflow

---