jQuery Dersleri
jQuery Nedir?
jQuery Nedir?
jQuery Kurulumu
jQuery Kod Yapısı
jQuery ready Fonksiyonu
jQuery Nesne Seçimi
jQuery Fonksiyonlar

jQuery Efektleri
jQuery Gizle ve Göster
jQuery Kaydırma
jQuery Animasyonlar
jQuery callback
jQuery Toplu İşlemler

jQuery HTML
jQuery Bilgi Almak
jQuery Bilgi Değiştirme
jQuery Bilgi Ekleme
jQuery Veri Silme
jQuery'de CSS İşlemleri

jQuery Nesneler
jQuery Nesne Boyutları
jQuery Nesne Bulma/Seçme

jQuery AJAX
jQuery AJAX

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

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:

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.




Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014