DERS PROGRAMI
Web Programlama
302
Ders Programı
-
jQuery Nedir?
-
jQuery'nin İnternet'ten İndirilmesi
-
jQuery Yazılış Biçimi
-
Belge Hazır Olayı (Document Ready Event)
-
jQuery HTML Eleman Seçicileri (Selectors)
-
Ayrı Bir Dosyadaki Fonksiyonlar
-
Olay (Event)
-
jQuery Efektleri - Hide ve Show (Gizle ve Göster)
-
jQuery Görüntüleme / Kaldırma Yöntemleri
-
jQuery Efektleri - Kaydırma (Sliding)
-
jQuery Efektleri - Animasyon (Animate)
-
jQuery Callback Fonksiyonları
-
jQuery - Zincirleme İşlem (Chaining)
-
JQuery - DOM Manipülasyonu
-
İçeriğe Erişme - text(), html(), and val()
-
jQuery - HTML Elemanlarına İçerik ve Vasıf Atama
-
Vasıf (Attribute) Atama - attr() Metodu
-
jQuery Elemanlar Ekleme
-
jQuery Silme Metotları
-
jQuery CSS Sınıflarına Erişim ve Değişiklik
-
jQuery css() Metodu
Lisans:
Creative Commons
26.11.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
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:
<!DOCTYPE html>
<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").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.