jQuery Görüntüleme / Kaldırma Yöntemleri
jQuery Görüntüleme / Kaldırma Yöntemleri
jQuery ile bir elemanın görünürlüğünü azaltabilir, yok edebilir ve tekrar eski görünümüne geri döndürebilirsiniz. jQuery'de bu amaçla kullanılabilecek metotlar aşağıda listelenmiştir:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
- jQuery fadeIn() Metodu
jQuery fadein() metodu ile gizlenmiş bir elemanı görünür hale getirebilirsiniz.
Yazılış biçimi:
$(seçici).fadeIn(hız,geriçağırma);
Kullanımı isteğe bağlı olan hız parametresi, gizleme/görüntüleme hızını belirler ve "slow" (yavaş), "fast" (hızlı) ya da milisaniye cinsinden bir değer olabilir. Kullanımı yine isteğe bağlı olan "geriçağır" parametresi ise, hide() ya da show() metotları tamamlandığı zaman icra edilecek bir fonksiyondur.
fadeIn() örnek HTML5 kodunu aşağıda inceleyelim:
<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(){
$("#x1").fadeIn();
$("#x2").fadeIn("slow");
$("#x3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>
<p> fadeIn() - CESITLI PARAMETRELERLE DEMO</p>
<button>KUTULARI GETIRMEK ICIN TIKLA</button>
<br><br>
<div id="x1" style="width:60px;height:70px;display:none;background-color:pink;"></div><br>
<div id="x2" style="width:60px;height:70px;display:none;background-color:gray;"></div><br>
<div id="x3" style="width:60px;height:70px;display:none;background-color:red;"></div>
</body>
</html>
Burada düğmeye fare yardımıyla tıklayınca aşağıdaki renkli kutular görünür hale gelecektir.
- jQuery fadeOut() Metodu
fadeOut() metodu, görünür bir elemanı görünmez hale getirir.
Yazılış biçimi:
$(seçici).fadeOut(hız,geriçağırma);
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ı gene isteğe bağlı olan "geriçağır" parametresi ise, gizleme olayı tamamlandığı zaman çalıştırılacak bir fonksiyondur.
Aşağıda, örnek bir HTML5 kodunu 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(){
$("#x1").fadeOut();
$("#x2").fadeOut("slow");
$("#x3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>fadeOut() -DENEME</p>
<button>KUTULARI YOK ET</button>
<br><br>
<div id="x1" style="width:50px;height:50px;background-color:blue;"></div><br>
<div id="x2" style="width:50px;height:50px;background-color:green;"></div><br>
<div id="x3" style="width:50px;height:50px;background-color:black;"></div>
</body>
</html>
KUTULARI YOK ET düğmesine tıkladığınızda renkli kutular görünür olmaktan çıkacaktır.
- jQuery fadeToggle() Metodu
fadeToggle() metodu, fadeIn() ve fadeOut() metotları arasında gidip gelme olanağı sağlar ve bu metotlar sırayla çalıştırılır. Elemanlar görünür ve görünmez durumlar arasında geçiş yapar.
Yazılış biçimi:
$(seçici).fadeToggle(hız,geriçağırma);
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ı gene isteğe bağlı olan "geriçağır" parametresi ise, gizleme olayı tamamlandığı zaman çalıştırılacak bir fonksiyondur.
Örnek HTML5 kodunu dikkatle inceleyelim:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#x1").fadeToggle();
$("#x2").fadeToggle("slow");
$("#x3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>fadeToggle()-fadeIn() ve fadeOut() ARASINDA GIDIS-GELIS</p>
<button>GECISLER ICIN TIKLA</button>
<br><br>
<div id="x1" style="width:40px;height:40px;background-color:lightblue;"></div>
<br>
<div id="x2" style="width:40px;height:40px;background-color:gray;"></div>
<br>
<div id="x3" style="width:40px;height:40px;background-color:red;"></div>
</body>
</html>
Burada GEÇİŞLER İÇİN TIKLA düğmesine tıkladığınızda renkli kutular kaybolacaktır. Aynı düğmeye yeniden tıkladığınızdaysa renkli kutular geri gelecektir. Böylece düğmeye tıklayarak iki durum arasında gidip gelebilirsiniz.
- jQuery fadeTo() Metodu
fadeTo() metodu ile saydamlığı (opacity) 0-1 arasında değiştirerek farklı saydamlıkta görünümler oluşturabilirsiniz.
Yazılış biçimi:
$(seçici).fadeTo(hız,saydamlık,geriçağırma);
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ı yine isteğe bağlı olan "geriçağır" parametresiyse, fadeTo() fonksiyonu tamamlandığı zaman icra edilecek bir fonksiyondur.
Örnekte bu metodun kullanımını görebilirsiniz:
<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(){
$("#x1").fadeTo("slow",0.1);
$("#x2").fadeTo("slow",0.44);
$("#x3").fadeTo("slow",0.65);
});
});
</script>
</head>
<body>
<p>fadeTo()-FARKLI SAYDAMLIK DERECELERI </p>
<button>TIKLA</button>
<br><br>
<div id="x1" style="width:50px;height:20px;background-color:red;"></div><br>
<div id="x2" style="width:50px;height:20px;background-color:black;"></div><br>
<div id="x3" style="width:50px;height:20px;background-color:blue;"></div>
</body>
</html>
TIKLA tuşuna tıklayınca, renkli kutuların saydamlıkları azalacaktır. Yukarıdaki koddaki fadeTo() fonksiyonundaki saydamlık parametresini inceleyiniz.
Yorumlar
Yorum Gönder