jQuery Gizle ve Göster
Bir nesneyi gizlemek için
.hide() , göstermek için
.show() fonksiyonlarından faydalanılır. Bu fonksiyonların parantez arasında bu işlemin ne kadar süre alacağı belirtilebilir:
.hide() - Bir nesneyi gizler.
.hide(1000) - İçine yazacağımız süre (ms) içinde gizlenmesini sağlayan animasyon.
.show() - Gizli bir nesneyi gösterir.
.show(1000) - İçine süre yazılabilir.
Örnekler
ÖRNEK 1. Bir butona tıklandığında yazımızı gizlesin:
<p id="p1">Gizlenecek yazı...</p>
<button id="btn1">Beni Gizle!</button>
<script>
$("#btn1").click(function(){
$("#p1").hide(1000);
});
</script><br /><br />
Kodu deneyin:
Gizlenecek yazı...
Beni Gizle!
ÖRNEK 2. Gizleme - gösterme işini .toggle(süre) ile de yapmak mümkün.
Bu örnekte nesne görünürse gizler, gizliyse görünür hale getirir.
<p id="p2">Gizlenecek yazı...</p>
<button id="btn2">Beni Gizle!</button>
<script>
$("#btn2").click(function(){
$("#p2").toggle(1000);
});
</script><br /><br />
Kodu deneyin:
Gizlenecek yazı...
Beni Gizle / Göster!
fadeIn() Fonksiyonu
"display: none;" belirtilip gizlenmiş bir nesneyi görünür hale getirir.
.fadeIn() - Gizlenmiş bir nesneyi görünür hale getirir.
.fadeIn(süre) - Nesne belirtilen sürede (ms) görünür hale gelir.
ÖRNEK
<p id="p3" style="display: none;">Gizli Yazı</p>
<button id="btn3">Yazıyı Göster</button>
<script>
$("#btn3").click(function(){
$("#p3").fadeIn(3000);
});
</script><br /><br /><br />
Gizli Yazı
Yazıyı Göster
fadeOut() Fonksiyonu
Görünür bir nesneyi yavaş yavaş sönükleştirip gizler.
.fadeOut()
.fadeOut(süre) - Nesne belirtilen sürede gizlenir.
ÖRNEK
<p id="p4">Gizlenecek Yazı</p>
<button id="btn4">Yazıyı Sil</button>
<script>
$("#btn4").click(function(){
$("#p4").fadeOut(3000);
});
</script><br /><br /><br />
Gizlenecek Yazı
Yazıyı Sil
fadeToggle() Fonksiyonu
Görünmeyen bir nesneyi görünür hale getirir, görüneni ise görünmez yapar. Parantez içinde süre belirtilebilir.
ÖRNEK
<p id="p5">Yaşamak, yaşattığın sürece güzel.</p>
<button id="btn5">Yazıyı göster / gizle</button>
<script>
$("#btn5").click(function(){
$("#p5").fadeToggle(1000);
});
</script><br /><br /><br />
Yaşamak, yaşattığın sürece güzel.
Yazıyı göster / gizle
fadeTo() Fonksiyonu
Bir nesnenin transparanlığını değiştirir. Bu kodun
.fadeTo(süre,transparanlık) şeklinde bir kullanımı vardır. Transparanlık değeri 0 ile 1 arasında bir değer olup 1 demek = 100% demektir.
ÖRNEK
Yaşamak, yaşattığın sürece güzel.
Yazının Transparanlığını 50% Yap