jQuery Efektleri – hide() , show() ve togggle()

Merhaba dostlar, bu dersimizde jQuery hide() ve show() efektlerini inceleyeceğiz. hide() efekti seçtiğimiz bir Html elementini gizlemek için kullanılır, show() efekti ise gizli olan bir Html elementini göstermek için kullanılır. Bu efektler 2 parametre alır. Şimdi inceleyelim.

$(selector).hide(speed,callback);

Parametre verme zorunluluğu yoktur. Ama speed gibi parametre belirterek daha görsel işlemler yapmak mümkündür.

jQuery hide()

hide() efekti ile seçtiğimiz Html elementini gizleyebiliriz. Aşağıda yer alan örnek kodlarımızı canlı olarak izleyelim. Eğer örnek üzerinde değişiklikler yapmak isterseniz Edit linkine tıklayabilirsiniz.

Yukarıdaki örnek kodumuzda butona basıldığında jQuery hide() metodu p Html elementini gizledi.

jQuery show()

show() efekti ise gizli olan bir Html elementinin gösterilmesi sağlar. Şimdi aşağıdaki canlı örneğimizi inceleyelim.

Yukarıda gizli olan bir Html elementini jQuery show() metodunu kullanarak gösterme işlemi gerçekleştirdik.

Örneğimize ek olarak metodumuza Sn cinsinden 2000 ekledik. Bu şekilde gösterme işlemi daha efektif ve yavaş gerçekleşecektir.

2000 milisaniye 2 Sn’yi ifade eder. Eğer 3000 yazsa idik 3 Sn denk gelip gösterme işlemi 3 saniye işleminde efektif şekilde gerçekleşecekti.

jQuery toggle()

jQuery toggle() metodu ise eğer Html elementi gösteriliyorsa gizlemeye, eğer gizleniyorsa göstermeye yarayan bir metodumuzdur. Bu bizlere kolaylık sağlamaktadır. Aşağıdaki canlı örneğimizi inceleyelim.

Bir Html elementini gizlemek ve göstermek için iki buton oluşturmak yerine sadece toggle() metodu ile iki işi tek seferde yapabiliriz.

Diğer bir derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares