Takip Edin

JQUERY

Jquery Slide ve Fade Efektleri

Jquery slide ve fade Efektleri - Öne Çıkan Görsel

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

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

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

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

#slideup id’sine sahip olan butona tıkladığımızda paragrafın görünürlüğü yukarıya doğru yavaş bir şekilde ortadan kalkacaktır.

#slidedown id’sine sahip olan butona tıkladığımızda görünmez olan paragraf, 1 saniye içerisinde aşağıya doğru bir efektle görünür hale gelecektir.

#toggle id’sine sahip olan butona tıkladığımızda paragraf görünür haldeyse slide up efektiyle görünmez hale, görünmez haldeyse slide down efektiyle görünür hale yavaş bir hızda gelecektir.

$(document).ready(function () {            
            $("#fadeout").click(function() {
                $("p").fadeOut(1000, function() {
                    alert("Paragrafın opaklığı 0'a indi!");
                });
            });

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

            $("#fadeto").click(function() {
                $("p").fadeTo("slow", 0);
            });
        });

#fadeout id’sine sahip olan butona tıkladığımızda paragrafın opaklığını 0‘a indirerek paragrafı 1 saniye içerisinde görünmez hale getirecektir.

#fadein id’sine sahip olan butona tıkladığımızda opaklığı 0 olan paragrafın opaklığını tekrar 1‘e yavaş bir hızda çıkaracaktır.

#toggle id’sine sahip olan butona tıkladığımızda opaklığı 0 olan paragrafın opaklığını 1‘e, opaklığı 1 olan paragrafın opaklığını ise 0‘a çevirecektir.

#fadeto id’sine sahip olan bir butona tıkladığımızda opaklığını yavaş bir hızda 0‘a indirir.

Burada .fadeout( )‘un .fadeto( )‘dan farkı, fadeout‘da paragrafın stil özelliğine display:none; ifadesinin eklenmesidir. fadeto( )‘da ise paragrafın sadece opaklığı sıfıra inmektedir ancak paragraf hala yer kaplamaya devam etmektedir.

Devamını oku

Popüler

error: Content is protected !!