Takip Edin

JQUERY

Jquery Show ve Hide Efektleri

jquery show ve hide efektleri - Öne Çıkan Görsel

Bu bölümde, Jquery’nin sahip olduğu show( ) ve hide( ) efektleri kullanılarak butonlar üzerinden bir paragrafın gizlenmesi ve gösterilmesi anlatılmaktadır.

$(document).ready(function() {
            $("#hide").click(function() {
                $("p").hide();
            });

            $("#show").click(function() {
                $("p").show();
            });

            $("#toggle").click(function() {
                $("p").toggle();
            });
});

#hide id’sine sahip olan butona tıkladığımızda paragrafın stiline display:none özelliği eklenir ve paragraf görünmez hale gelir.

#show id’sine sahip olan butona tıkladığımızda paragrafa eklenen display:none özelliği silinir ve paragraf tekrar görünür hale gelir.

#toggle id’sine sahip olan butona tıkladığımızda paragrafı, görünmezse görünür hale, görünür bir halde ise görünmez hale getirir.

$(document).ready(function() {
            $("#hide").click(function() {
                $("p").hide("slow");
            });

            $("#show").click(function() {
                $("p").show("fast");
            });

            $("#toggle").click(function() {
                $("p").toggle("slow");
            });
});

.hide(“slow”), slow butonuna tıkladığımızda paragrafı yavaş bir hızda görünmez hale getirir.

.show(“fast”), show butonuna tıkladığımızda paragrafı hızlı bir şekilde görünür hale getirir.

.toggle(“slow”), toggle butonuna tıkladığımızda paragrafı görünmezse yavaş bir şekilde görünür hale, görünmez bir halde ise yine yavaş bir şekilde görünür hale getirir.

$(document).ready(function() {
            $("#hide").click(function() {
                $("p").hide(2000);
            });

            $("#show").click(function() {
                $("p").show(1000, function() {
                    alert("Paragraf Gösterildi!");
                });
            });

            $("#toggle").click(function() {
                $("p").toggle("slow");
            });
        });

.hide(2000), hide butonuna tıkladığımızda paragrafı, 2 saniyede görünmez hale getirir.

.show(1000, function() {
alert(“Paragraf Gösterildi!”);
});
show butonuna tıkladığımızda paragrafı, 1 saniyede görünür hale getirir ve “Paragraf Gösterildi!” ifadesine sahip olan bir alert kutusunu tarayıcıda gösterir.

Devamını oku

Popüler

error: Content is protected !!