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.
jQuery fadeOut() Metodu
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeOut(); }); </script> |
2 Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gizlenmesinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeOut(3000); }); </script> |
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:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeOut("slow"); }); </script> |
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeIn(); }); </script> |
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeIn(3000); }); </script> |
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:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeIn("slow"); }); </script> |
jQuery fadeToggle() Metodu
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeToggle(); }); </script> |
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeToggle(3000); }); </script> |
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:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeToggle("slow"); }); </script> |
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeTo(3000,0.4); }); </script> |
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:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").fadeTo("slow",0.2); }); </script> |
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.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="box"></div> <button id="fadeIn">fadeIn( )</button> <button id="fadeOut">fadeOut( )</button> <button id="fadeToggle">fadeToggle( )</button> <button id="fadeIn-3000">fadeIn(3000)</button> <button id="fadeOut-3000">fadeOut(3000)</button> <button id="fadeToggle-3000">fadeToggle(3000)</button> <button id="fadeTo-3000">fadeTo(3000,0.4)</button> <button id="fadeIn-slow">fadeIn("slow")</button> <button id="fadeOut-slow">fadeOut("slow")</button> <button id="fadeToggle-slow">fadeToggle("slow")</button> <button id="fadeTo-slow">fadeTo("slow",0.2)</button> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#box { width: 100%; height: 200px; background-color: blueviolet; margin: 10px; } button { margin: 10px; padding: 6px 12px; } |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> $(document).ready(function() { $("#fadeIn").click(function() { $("#box").fadeIn(); }); $("#fadeOut").click(function() { $("#box").fadeOut(); }); $("#fadeToggle").click(function() { $("#box").fadeToggle(); }); $("#fadeIn-3000").click(function() { $("#box").fadeIn(3000); }); $("#fadeOut-3000").click(function() { $("#box").fadeOut(3000); }); $("#fadeToggle-3000").click(function() { $("#box").fadeToggle(3000); }); $("#fadeTo-3000").click(function() { $("#box").fadeTo(3000,0.4); }); $("#fadeIn-slow").click(function() { $("#box").fadeIn("slow"); }); $("#fadeOut-slow").click(function() { $("#box").fadeOut("slow"); }); $("#fadeToggle-slow").click(function() { $("#box").fadeToggle("slow"); }); $("#fadeTo-slow").click(function() { $("#box").fadeTo("slow",0.2); }); }); |
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
⇒ Div’in opacity Değeri Değiştiğinde
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.
, fadeIn(), fadeToggle(), fadeTo() Metodları ve Kullanımları){kind=link}