Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

JQuery – fadeOut ve fadeIn Fonksiyonları

JQuery kütüphanesinin fadeOut ve fadeIn fonksiyonları, belirli elemanları gizleme – gösterme işlemlerinde animasyonlu bir görüntü sergilemektedirler.

<div id="Div1">Gençay Yıldız</div>
<input type="submit" id="btnGizle" value="Gizle" /> |
<input type="submit" id="btnGoster" value="Göster" />

HTML kod yapısını ele alalım.

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnGizle").click(function () {
            $("#Div1").fadeOut();
        });
        $("#btnGoster").click(function () {
            $("#Div1").fadeIn();
        });
    });
</script>

Yukarıdaki kod bloğundaki kullanım tarzı “Div1” id değerine sahip elemanı animasyonu bir biçimde gösterip gizlemeye yaramaktadır.

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnGizle").click(function () {
            $("#Div1").fadeOut(1000, function () {
                alert("Div nesnesi gizlenmiştir.");
            });
        });
        $("#btnGoster").click(function () {
            $("#Div1").fadeIn(1000, function () {
                alert("Div nesnesi gösterilmiştir.");
            });
        });
    });
</script>

Yukarıdaki kod bloğunu incelerseniz eğer “Div1” id değerine sahip eleman gizlenip gösterilirken animasynun süresi manuel olarak belirlenmiş ve işlem sonucunda alert ile kullanıcıya bilgi verilmiştir.

Gördüğünüz gibi bu şekilde esnek bir kullanımada sahiptir.

Sonraki yazılarımda görüşmek üzere…
Hepinize iyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*