jQuery Video Dersleri – slide, hide ve fade Metodları | Zingocan

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


&lt;style type=&quot;text/css&quot;&gt;
#kutu
{
background: orange;
width: 550px;
height: 520px;
display: none;
}
p a
{
color: orange;
}
&lt;/style&gt;

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

&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;script type=&quot;text/javascript&quot;&gt;

$(function()  {
$('a').click(function() {
$('#kutu').slideDown ('6000');
$('p a').css('color' , 'green');
});

});
&lt;/script&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot;&gt;

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