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

Bu yazımızda jQuery’de fadeOut, fadeIn, fadeToggle ve fadeTo metodları ile Html öğelerini efektif bir şekilde nasıl gizleyebilir ve tekrar nasıl görünür hale getirebiliriz 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.

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

  1   Herhangi bir parametre vermeden yani fadeOut() şeklinde kullanırsak bu metodu uyguladığımız Html öğesi efektif bir şekilde 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:

jQuery fadeIn() Metodu

fadeIn() metodu: fadeIn() metodu ile gizlenmiş bir Html öğesini efektif bir şekilde tekrardan görünür hale getirebiliriz. 3 farklı kullanım şekli vardır:

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

  2   Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin görünür hale gelmesinin 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:

fadeToggle() metodu: fadeToggle() metodu ile bir 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 fadeToggle() şeklinde kullanırsak bu metodu uyguladığımız Html öğesi efektif bir şekilde gizlenir veya görünür hale gelir.

  2   Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gizlenmesinin veya görünür hale gelmesinin 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 fadeTo() Metodu

fadeTo() metodu: fadeTo() metodu ikinci bir parametre olarak 0 ile 1 arasında bir değer alır. Bu değer ile Html öğesine opacity yani şeffaflık özelliği uygulanır. Bir Html öğesinin opacity değeri 1’den 0’a doğru azaldıkça görünürlüğüde azalır. 2 farklı kullanım şekli vardır:

  1   Birinci parametre olarak milisaniye türünden değer verebiliriz. Örneğin Html öğesinin gizlenmesinin veya görünür hale gelmesinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz. İkinci parametre olarakta opacity değeri veriyoruz.

  2   Birinci parametrede rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz. İkinci parametre olarakta opacity değeri veriyoruz.

Örneğin yavaş bir efekt vermek istiyorsak:

Gördüğünüz gibi fadeTo() metodunun diğerlerinden farkı, hız parametresi verildikten sonra birde opacity değeri veriyoruz. Böylece uyguladığımız Html öğesinin şeffaflık değeri verdiğimiz değere kadar azalmış oluyor.

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

Css Kodları

jQuery Kodları

Gördüğünüz gibi fadeOut, fadeIn, fadeToggle ve fadeTo metodlarını 3 farklı şekilde kullandık. Aşağıdaki uygulama üzerinde butonlara tıklayarak efektleri inceleyebilirsiniz.

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.

Aynı şekilde fadeTo metodu ile opacity değerini değiştirdiğimiz takdirde div’in opacity değerinin değiştiğini görebilirsiniz.

 ⇒  Div Gizli Hale Geldiğinde

jquery-efektleri-display-none

 ⇒  Div’in opacity Değeri Değiştiğinde

jquery-efektleri-opacity

Umarım “jQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() 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 slideDown(), slideUp(), slideToggle() 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.