Menggunakan Efek Fading pada jQuery

Kalian dapat menggunakan metode fadeIn() dan fadeOut() pada jQuery untuk menampilkan atau menyembunyikan elemen HTML secara bertahap dengan menambahkan atau mengurangi opacity (Transparansi) nya. Contoh:

<script>
    $(document).ready(function(){
        // Fade Out paragraf
        $(".tombol-out").click(function(){
            $("p").fadeOut();
        });

        // Fade In paragraf
        $(".tombol-in").click(function(){
            $("p").fadeIn();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Sama seperti metode efek pada jQuery lainnya, kalian dapat menentukan parameter durasi atau kecepatan pada metode fadeIn() dan fadeOut() agar dapat mengontrol berapa lama animasi fading akan berjalan. Durasi dapat ditentukan baik menggunakan salah satu string yang telah ditentukan yaitu "slow" atau "fast", atau dalam unit milidetik; nilai unit yang lebih tinggi menunjukkan animasi yang lebih lambat:

<script>
    $(document).ready(function(){
        // Fade Out paragraf dengan kecepatan yang berbeda
        $(".tombol-out").click(function(){
            $("p.normal").fadeOut();
            $("p.cepat").fadeOut("fast");
            $("p.lambat").fadeOut("slow");
            $("p.sangat-cepat").fadeOut(50);
            $("p.sangat-lambat").fadeOut(2000);
        });

        // Fade In paragraf dengan kecepatan yang berbeda
        $(".tombol-in").click(function(){
            $("p.normal").fadeIn();
            $("p.cepat").fadeIn("fast");
            $("p.lambat").fadeIn("slow");
            $("p.sangat-cepat").fadeIn(50);
            $("p.sangat-lambat").fadeIn(2000);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Efek metode fadeIn()/fadeOut() terlihat mirip dengan show()/hide(), tetapi tidak seperti metode show()/hide(), metode fadeIn()/fadeOut() hanya menganimasikan opacity dari elemen target dan tidak menganimasikan dimensinya.

Kalian juga dapat menentukan fungsi Callback yang akan dijalankan setelah metode fadeIn() atau fadeOut() selesai. Kita akan belajar lebih banyak tentang fungsi Callback pada bagian mendatang:

<script>
    $(document).ready(function(){
        // Menampilkan pesan alert setelah Fade Out paragraf
        $(".tombol-out").click(function(){
            $("p").fadeOut("slow", function(){
                // Kode akan dijalankan
                alert("Efek Fade Out selesai.");
            });
        });

        // Menampilkan pesan alert setelah Fade In paragraf
        $(".tombol-in").click(function(){
            $("p").fadeIn("slow", function(){
                // Kode akan dijalankan
                alert("Efek Fade In selesai.");
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo



Metode fadeToggle()

Metode fadeToggle() pada jQuery dapat menampilkan atau menyembunyikan elemen yang dipilih dengan menganimasikan opacity (transparansi) pada elemen sehingga jika elemen tersebut awalnya ditampilkan, ketika metode fadeToggle() dipanggil elemen tersebut akan memudar; Begitupula sebaliknya:

<script>
    $(document).ready(function(){
        // Toggle display paragraf dengan fading
        $(".tombol-toggle").click(function(){
            $("p").fadeToggle();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Demikian pula, kalian dapat menentukan parameter durasi untuk metode fadeToggle() seperti metode fadeIn()/fadeOut() untuk mengontrol durasi atau kecepatan animasi toggle fade:

<script>
    $(document).ready(function(){
        // Fade Toggle paragraf dengan kecepatan yang berbeda
        $(".tombol-toggle").click(function(){
            $("p.normal").fadeToggle();
            $("p.cepat").fadeToggle("fast");
            $("p.lambat").fadeToggle("slow");
            $("p.sangat-cepat").fadeToggle(50);
            $("p.sangat-lambat").fadeToggle(2000);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Kalian juga dapat menentukan fungsi Callback untuk metode fadeToggle():

<script>
    $(document).ready(function(){
        // Menampilkan pesan alert setelah toggle paragraf
        $(".tombol-toggle").click(function(){
            $("p").fadeToggle(1000, function(){
                // Kode akan dijalankan
                alert("Efek toggle fade selesai.");
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode fadeTo()

Metode fadeTo() pada jQuery hampir mirip dengan metode fadeIn(), tetapi tidak seperti fadeIn(), metode fadeTo() dapat memudarkan elemen ke tingkat opacity (transparansi) tertentu:

$(selector).fadeTo(kecepatan, opacity/transparansi, callback);


Parameter opacity yang diperlukan untuk menentukan opacity akhir dari elemen target dapat berupa antara angka 0 dan 1. Parameter durasi atau kecepatan juga diperlukan untuk menentukan durasi fade to animation:

<script>
    $(document).ready(function(){
        // Fade paragraf dengan opacity yang berbeda
        $(".tombol-to").click(function(){
            $("p.none").fadeTo("fast", 0);
            $("p.partial").fadeTo("slow", 0.5);
            $("p.complete").fadeTo(2000, 1);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

0 Komentar