Zingocan.com Bloğumuzun logosunda olduğu gibi, yukarıda verdiğim resimde, jquery – hover() metodundan bahsedeceğim. Hover metodu nesnelere mouse pozisyonu ile fonksiyon atama işlevidir. Daha önce oluşturduğumuz animate tekniğini bu dersimizde tekrar işleyeceğiz. jQuery derslerimizin 6. dersi olan Hover metodunda;
Alternatif Video;
Video Dersimizin içeriğinden biraz bahsedecek olursak;
jQuery
Html kod satırlarımızda 5 adet resim gösterdik. Bu resimlere animate ve hover metodlarıyla nasıl bir yumuşaklık değeri katacağımızı öğrettim..Aşağıda bulunan javascript kodlarıyla bu işlemleri gerçekleştirdik.
$(function() {
$('#foto img').animate({
"opacity": .5
});
$('#foto img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
}, function() {
$(this).stop().animate({
"opacity": .5
});
});
});
$('#foto img').animate({ "opacity": .5 });
Değerini kullanarak, foto katmanındaki img nesnelerine opacity ayarlarını 0.5 (ya da .5 olarak) şeffaf bir görünüm verdik.
$('#foto img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
kodlarıyla, hover metodunu kullanarak , mouse ile herhangi bir resmin üzerine gelindiğinde; opacity ayarlarının 1 e çıkmasını istedik.Ve son olarak
$(this).stop().animate({ "opacity": .5 });
kod satırı ile fonksiyon tamamlandıktan sonra tekrar 0.5 opacity ayarlarına geri gönderdik.
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
Güzel derrs olmuş teşekkürler
Güzel iş kendi sitemde kullanıcam :p
yaa moruk bu jquery falan ne ayak
jquery at nalı demek kardeşim..
ya arkadaşlar ben bu web tasarım işlerini öğrenmek istiyorum nasıl yapıcam birisi bana söylesin çok büyük bi çalışma yapmayı düşünüyorum herkes hayran kalıcak nasıl yapabilirim?
Nasıl yapılıo böle siteler çok hayran kalıorm bazen yani nerden başlasak
@Ihsan En başta buradan başlayabilirsin..
@skolaf yoruma bittim xD
Allahın hikmeti işte ihsan..
Pingback: jQuery Video Dersleri-Animate Metodu | 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 – slide, hide ve fade Metodları | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster
Pingback: jQuery Slidedown Metodu Kullanımı | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster
Pingback: jQuery Animate Video Dersi | ZingoDers
Pingback: jQuery slide, hide ve fade Metodları | ZingoDers
Pingback: jQuery Video Dersleri-4 Varyasyon oluşturma ve silme
Pingback: jQuery Dersleri: toggle ve toggleClass Metodları - Zingocan
Pingback: jQuery hover ve chlidren Metodu – Video Ders - Zingocan
good quality post thanks
Sağolasın güzel anlatmışsın.Anlattıklarının yarısını yapabildim.Fakat geri kalan yarısını yaparken sorunlarla karşılaştım.İlk sorun vidyoda en sonuna doğru “tamam hazır ama şurdaki parantezleri temizleyelim” deyip ordaki parantezleri silmen.Aç-Kapa,Aç-Kapa diyorsun da işte ben de aynısını açıp kapıyorum fakat olmuyor maalesef.hover’ın ikinci function’ını yazarken yani soluklaştırırken problemler çıkıyor.Zaten fazla tecrübem yok jquery ile ilgili.Parantez manyağı bir kütüphane “Hadi şurdakileri de silelim deyince iş karışıyor” Kodlar yukarıda var ama kopyala yapıştırla öğrenilmez.Tam her şey güzel gitti derken ya hiç çalışmıyor 2.function’ı silince ya da onu ekleyince bozuk çalışıyor.Tavsiyem parantezlere dikkat et.Zaten parantez hastası oluyorum çalışırken, düzen konusunda problem oluyor ki php ile çalışmama rağmen Beautiful-parantezlere alışkınım fakat problem çıkıyor.
Kopyala->Yapıştır yapınca çalıştı.Güzel bir animasyon tabi dediğim gibi eline sağlık ama vidyoda rastgele sonlara doğru bir şeyler silmezsen veya parantezleri ilk başta ayarlayıp .animate({#enter#}); yaparsan bence daha okunaklı olur.
Kolay gele…
Yorumunuz için teşekkürler, acemi zamanlarımızmış yeni videolar yeni dersler eklenecek