jQuery Efektleri - Hide ve Show (Gizle ve Göster)
jQuery Efektleri - Hide ve Show (Gizle ve Göster)
jQuery, hide() ve show() metotları ile HTML elemanlarını gizleyebilir ya da görüntüleyebilir.
jQuery hide() ve show()
jQuery, hide() ve show() metotları ile HTML elemanlarını gizlemek ya da görüntülemek mümkündür:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() ve show() fonksiyonlarının yazılış biçimi
$(seçici).hide(hız,geriçağır);
$(seçici).show(hız,geriçağır);
Kullanımı isteğe bağlı olan hız parametresi, gizleme / görüntüleme hızını belirler ve birimi "slow" (yavaş), "fast" (hızlı) ya da milisaniye türündedir. Kullanımı isteğe bağlı olan "geriçağır" parametresi ise, hide() ya da show() metotları tamamlandığı zaman icra edilecek bir fonksiyondur.
Örneğin,
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle() Fonksiyonu
jQuery ile toggle() metodunu kullanarak, hide() ve show() metotları arasında geçişler sağlayabilirsiniz; böylece seçilen eleman bir görüntülenir bir gizlenir ve bu geçişler devam eder.
Örneğimizi hep birlikte inceleyelim:
$("button").click(function(){
$("p").toggle();
});
Yazılış biçimi
$(seçici).toggle(hız,geriçağır);
Parametrelerin anlamı ve işlevi yukarıda açıklandığı gibidir.
Toggle fonksiyonuna örnek HTML5 kodunu aşağıda inceleyebilirsiniz:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>GIDIS-GELISLER</button>
<p>Geleceği Yazanlar yazısı</p>
<p>Her düğmeye basıldığında gelip gider</p>
</body>
</html>
GİDİŞ-GELİŞLER düğmesine tıklayınca iki satır silinecek, tekrar tıklayınca geri gelecektir.
Yorumlar
Yorum Gönder