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



Pingback: jQuery Video Dersleri – jQuery Başlangıç | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster
Pingback: jQuery Dersleri: toggle ve toggleClass Metodları | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster
Pingback: jQuery Video Dersleri – slide, hide ve fade Metodları | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster
Pingback: Görsel jQuery Video Dersleri | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster
Pingback: jQuery Video Dersleri-4 Varyasyon oluşturma ve silme | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster
Pingback: Ders 8:hover ve chlidren Metodu | Bir jQuery Harikası
Pingback: jQuery Video Dersleri | ZingoDers
Pingback: jQuery hover ve chlidren Metodu | ZingoDers
Pingback: jQuery Varyasyon oluşturma ve silme | ZingoDers
Pingback: Yeni Başlayanlar için jQuery Video Dersi | ZingoDers
Pingback: jQuery Video Dersleri-Animate Metodu - Zingocan
Pingback: jQuery Slidedown Metodu Kullanımı - Zingocan
Pingback: jQuery Dersleri: hover() Metodu - Zingocan
Noticed your web site on del.icio.us today and genuinely liked it.. i saved it and will be back to check it out some more later .. As a Noob, I am continually seeking online for articles or blog posts that can help me. Thanks a lot!