jQuery Video Dersleri – slide, hide ve fade Metodları

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

[php]

<style type="text/css">
#kutu
{
background: orange;
width: 550px;
height: 520px;
display: none;
}
p a
{
color: orange;
}
</style>

[/php]

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

[php]</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;">[/php]

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