Turkcell | Geleceği Yazanlar

302: JQueryBaşlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

jQuery fadeToggle() Metodu

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : web-programlama

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.