jQuery slideDown(), slideUp(), slideToggle() Metodları ve Kullanımları

Bu yazımızda jQuery’de slideDown, slideUp ve slideToggle metodları ile Html öğelerini efektif olarak aşağı-yukarı olacak şekilde nasıl açılır-kapanır yapabiliriz onu öğreneceğiz.

Şimdi sırasıyla bu metodların ne işe yaradığını ve nasıl kullanıldığını inceleyelim.

Daha sonra da tüm metodları aynı anda içeren bir uygulama yapalım. Böylece metodların birbirinden farkını daha iyi anlayabiliriz.

slideDown() metodu: slideDown() metodu ile gizlediğimiz Html öğesini efektif bir şekilde aşağı doğru açarak görünür hale getirebiliriz. 3 farklı kullanım şekli vardır:

  1   Herhangi bir parametre vermeden yani slideDown() şeklinde kullanırsak bu metodu uyguladığımız Html öğesi efektif bir şekilde aşağı doğru görünür hale gelir.

  2   Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin görünmesinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.

  3   Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.

Örneğin yavaş bir efekt vermek istiyorsak:

jQuery slideUp() Metodu

slideUp() metodu: slideUp() metodu ile seçtiğimiz Html öğesini efektif bir şekilde yukarı doğru kapatarak gizleyebiliriz. 3 farklı kullanım şekli vardır:

  1   Herhangi bir parametre vermeden yani slideUp() şeklinde kullanırsak bu metodu uyguladığımız Html öğesi efektif bir şekilde yukarı doğru gizlenir.

  2   Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gizlenmesinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.

  3   Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.

Örneğin yavaş bir efekt vermek istiyorsak:

slideToggle() metodu: slideToggle() metodu ile seçtiğimiz Html öğesini görünür durumdaysa gizleyebilir, gizli durumdaysa görünür hale getirebiliriz. Yani Gizle-Göster, Göster-Gizle işlevi görür. 3 farklı kullanım şekli vardır:

  1   Herhangi bir parametre vermeden yani slideToggle() şeklinde kullanırsak bu metodu uyguladığımız Html öğesi gizli durumdaysa görünür, görünür durumdaysa gizlenir.

  2   Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gizlenmesinin veya görünmesinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.

  3   Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.

Örneğin yavaş bir efekt vermek istiyorsak:

Artık bu metodları içerisinde barındıran uygulamamıza geçebiliriz.

Html Kodları

Css Kodları

jQuery Kodları

Son olarak şunu söylemek istiyorum:

Bu metodların arka planda neler yaptığını bilmemizde de fayda var.

Burada div etiketi gizlendiğinde tarayıcıda sağ tıklayıp incele derseniz, div’in display değerinin none olarak değiştiğini görebilirsiniz.

 ⇒  Div Görünür Durumdayken

jquery-efektleri-display-block

 ⇒  Div Gizli Hale Geldiğinde

jquery-efektleri-display-none

Umarım “jQuery slideDown(), slideUp(), slideToggle() Metodları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

jQuery hide(), show(), toggle() Metodları ve Kullanımları

jQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() Metodları ve Kullanımları

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.