JQuery Gizle ve Göster


Webmaster Genel   

Yazar: ByClxon    0 Yorum    251 Görüntüleme
  • 0 Oy - 0 Yüzde

Paylaşım Tarihi: 13.05.2016, 22:28:34 #1
ByClxon SEA !
Efsane Üye
Status: Çevrimdışı Yorum Sayısı:1,020 Konu Sayısı:444 Üyelik Tarihi:07.01.2016 Rep Puanı: 664

Bir nesneyi gizlemek için .hide(), göstermek için [b].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.

[b]Ö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ı...


[b]fadeIn() Fonksiyonu

"display: none;" belirtilip gizlenmiş bir nesneyi görünür hale getirir.

[b].fadeIn() - Gizlenmiş bir nesneyi görünür hale getirir.
[b].fadeIn(süre) - Nesne belirtilen sürede (ms) görünür hale gelir.

[b]Ö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 /> 





[b]fadeOut() Fonksiyonu

Görünür bir nesneyi yavaş yavaş sönükleştirip gizler.

.fadeOut()
.fadeOut(süre) - Nesne belirtilen sürede gizlenir.

[b]Ö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ı



[b]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.

[b]Ö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.



[b]fadeTo() Fonksiyonu

Bir nesnenin transparanlığını değiştirir. Bu kodun [b].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.

[b]ÖRNEK

Yaşamak, yaşattığın sürece güzel.
[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[/b]

Kullanıcı İmzası
#fenerbahçeA.A.K.
İmage
İletişim İçin Facebook;

linkleri görmek için giriş yapmanız. Yada üye olmanız gerekir.


Öfkemiz sarsın her yanı, bozkurtlar yürüye yürüye
Dökülsün düşmanın kanı, yaşasın ırkçı TÜRKİYE!

Taşında gözü olanın yurduna MEZAR kazacağız
Hainin, soysuzun, döneğin alnına VATAN yaazcağız
Hainin, soysuzun alnına YAŞASIN TURAN yazacağız!



İmage






 

         










Aradığınızı Bulamadınız Mı ?

Konuyu görüntüleyenler:
1 Misafir