• Üyelik paylaşımı yasaktır! Hesabınızı başkalarına vermeyin! Hesap paylaşımları yasaklama ile sonuçlanacaktır.

JQuery Gizle ve Göster

Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...

ByClxon

Süper Üye
Katılım
7 Ocak 2016
Mesajlar
955
Beğeni Puanı
4
Yaş
22
[font='Titillium Web', sans-serif]Bir nesneyi gizlemek için [/FONT][font='Titillium Web', sans-serif].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:

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



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

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


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

JavaScript Kodu
<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 /> 





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

JavaScript Kodu
<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ı



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 JavaScript Kodu
<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.



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.
[/FONT]
 
Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...


Üst Alt