Jquery Effect .show() & .hide()
$('.kutu').show();
kutu classına (sınıf) sahip öğelerin görünmesini sağlar.
$('.kutu').hide();
kutu classına (sınıf) sahip öğelerin gizlenmesini sağlar.
<div id="kutu">Buraya tıklayın</div>
<img id="book" src="book.png" alt="" width="100" height="100" />
Bu öğe başlangıçta saklı
$('#kutu').click(function() {$('#book').show('slow', function() {// animasyon bitti});});
Bu fonksiyon ile kutu idsine sahip div göürünür kılınıyor. Ancak .show() içerisine bir 'slow' konularak bu işlem animasyon haline getiriliyor. Bu sayede gösterme efekti yavaş olarak oluşturuluyor. (normal ya da fast de kullanılabilinirdi)
Aynı işlemler .hide() gizleme için de gerçekleştirilebilinir.
Aynı işlemler .hide() gizleme için de gerçekleştirilebilinir.
Bütün bir örnek göstermek gerekirse:
<!DOCTYPE html><html><head><style>p { background:yellow; }</style><script src="http://code.jquery.com/jquery-latest.js"></script></head><body><button>Show it</button><p style="display: none">Merhaba</p><script>$("button").click(function () {$("p").show("slow");});</script></body></html>
Burada gerçekleşen olaylar:
- Yukarıda "style" etiketiyle "p" paragraf öğesine stil verilir.
- İlk "script" etiketi ile jquery kütüphanesi çağırılır. (Dışarıdan değil de yerel de çağırılabilinir.)
- Paragrafa "display: none" stili ile gizli tutulmuştur.
- Alt kısımdaki ikinci "script" etiketi ile site veya sayfa içi scriptler çağırılır.
- button öğesine tıklanması ".click" eventi ile yakalanır.
- "p" öğeleri "show" efekti ile görünür hale getirilir.
- "show" içerisinde yazılan "slow" ile işlem hızı 600 milisaniye yapılır ve yavaşlatır.