Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
jQuery hide show toggle (gizle göster) komutları

Merhaba Arkadaşlar,

jquery ile sayfa içerisindeki belirli yerleri gösterip gizleme işlemleri hakkında biraz bilgi vereceğim.

Bir nesneyi gizlemek için .hide(), göstermek için .show() fonksiyonları kullanılır.

Bu fonksiyonların parantez arasında bu işlemin ne kadar süre alacağı belirtilebilir.

.hide() - bir nesneyi gizler.
.hide(1000) - içine yazacağımız süre (ms) içinde gizlenmesini sağlayan animasyon efektidir.

.show() - gizli bir nesneyi gösterir.
.show(1000) - içine süre yazılabilir. Aynı hide komutundaki gibidir.

Gizleme - gösterme işini .toggle(süre) ile de yapmak mümkündür.

Bir örnekle bunu açıklayalım.

öncelikle sayfamıza jquery kütüphanesini yüklüyoruz.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

Daha sonra sayfamıza bir <p> etiketi açıp içerisine bişeyler yazalım. Bir de  <p></p> etiketleri arasındaki yazımızı gizleyip göstermesini tetiklemek için bir buton sayfaya ekleyelim.

<p id="p1">
bu etiket arası aşağıdai buton tıklandığında gizlenip gösterilecek alandır.
www.bildiklerimiz.net
</p>

<button id="btn1">Gizle / Göster</button>

sayfa içerisine eklememez gerekenleri ekledik geriye bunları tetiklemesi için ufak fonksiyonumuzu yazmak kaldı.

 

<script type="text/javascript">

$("#btn1").click(function(){

    $("#p1").toggle(1000)

});

</script>

yukarıda ki kodda #btn1 sayfaya koymuş olduğumuz butonun id adı, bunun click eventine yapması gereken işlemi belirtiyoruz.

#p1 id si ise bizim <p> etiketimizin id adı buna jquery de bulunan toggle(1000) vererek 1 saniyede açıksa gizlemesini gizli ise göstermesi komutunu vermiş oluyoruz. Siz benim verdiğim 1000 i 3000 yaparak daha yavaş bir efektle geçiş olmasını sağlayabilirsiniz.

Bir sonraki yazıda görüşmek dileğiyle...

Sosyal Hesabında Paylaş

3184 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2021 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.