Merhaba arkadaÅŸlar. Ä°lk dersimizde jQuery’i kullanabilmek için ne gibi alanlardan faydalanabiliriz, jquery‘i sitemize nasıl import ederiz ve fadeOut yöntemini nasıl kullanırız sorularını cevapladık.Bu dersimizde ise jQuery‘de kullanabileceÄŸimiz;
fadeOut, fadeIn, slideUp, slideDown, hide ve show metodlarını gösterdim.Daha kaliteli Görüntü için Videoyu indiriniz
Ben video izlemek istemiyorum diyen arkadaşlarımız için kısa bir özet geçeceğim.Download butonunu kullanarak indirdiğiniz ders içeriğinde, index.html ve jquery.js dosyasını bulacaksınız.
Ä°ndex’imizin içerisinde aÅŸağıdaki bölümleri kullandık;
CSS
<style type="text/css"> #kutu { background: orange; width: 550px; height: 520px; display: none; } p a { color: orange; } </style>
Bir önceki dersimize nazaran bu dersteki CSS farklılıkları;
display: none; :
kutu olarak adlandırdığımız katmanın görünmemesini sağladı.
p a
{
color: orange;
}
<p> olarak kullandığımız paragraf belirtecinin içerisindeki link renklerini turuncu (orange) yapmamızı sağladı
Jquery
</p>
<p style="text-align: left;"><script type="text/javascript">
$(function()Â {
$('a').click(function() {
$('#kutu').slideDown ('6000');
$('p a').css('color' , 'green');
});
});
</script></p>
<p style="text-align: left;">
Bir önceki dersimizde gördüğümüz fadeOut yöntemini bu dersimizde slide ve hide / show metordlarıyla gösterdik.
Daha sonra
$(‘p a’).css(‘color’ , ‘green’);
olarak belirttiğimiz fonksiyon, linklerimizden herhangi birine tıklanıldıktan sonra,css kodlarında belirttiğimiz p a belirtecinin rengini green olarak değiştirmesini sağladı.
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
