Menggunakan Efek Sliding pada jQuery

Metode jQuery slideUp() dan slideDown() digunakan untuk menyembunyikan atau menampilkan elemen HTML secara bertahap dengan mengurangi atau menambah tinggi dari suatu elemen (Menggesernya ke atas atau ke bawah). Contoh:

<script>
    $(document).ready(function(){
        // Slide up paragraf
        $(".tombol-up").click(function(){
            $("p").slideUp();
        });

        // Slide down paragraf
        $(".tombol-down").click(function(){
            $("p").slideDown();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

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

<script>
    $(document).ready(function(){
        // Sliding up paragraf dengan kecepatan berbeda
        $(".tombol-up").click(function(){
            $("p.normal").slideUp();
            $("p.cepat").slideUp("fast");
            $("p.lambat").slideUp("slow");
            $("p.sangat-cepat").slideUp(50);
            $("p.sangat-lambat").slideUp(2000);
        });

        // Sliding down paragraf dengan kecepatan berbeda
        $(".tombol-down").click(function(){
            $("p.normal").slideDown();
            $("p.cepat").slideDown("fast");
            $("p.lambat").slideDown("slow");
            $("p.sangat-cepat").slideDown(50);
            $("p.sangat-lambat").slideDown(2000);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

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

<script>
    $(document).ready(function(){
        // Menampilkan pesan alert setelah slide up paragraf
        $(".tombol-up").click(function(){
            $("p").slideUp("slow", function(){
                // Kode untuk dijalankan
                alert("Efek Slide Up selesai.");
            });
        });

        // Menampilkan pesan alert setelah slide down paragraf
        $(".tombol-down").click(function(){
            $("p").slideDown("slow", function(){
                // Kode untuk dijalankan
                alert("Efek Slide Down selesai.");
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode slideToggle()

Metode slideToggle() pada jQuery dapat menampilkan atau menyembunyikan elemen yang dipilih dengan menganimasikan tinggi elemen sehingga jika elemen tersebut awalnya ditampilkan, ketika metode slideToggle() dipanggil maka elemen tersebut akan bergeser ke atas; Begitupula sebaliknya:

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

Lihat kode di Github | Lihat Live Demo

Kalian juga dapat menentukan parameter durasi untuk metode slideToggle() seperti metode slideUp() dan slideDown() agar dapat mengontrol kecepatan animasi toggle slide:

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

Lihat kode di Github | Lihat Live Demo

Demikian pula, kalian juga dapat menentukan fungsi Callback untuk metode slideToggle():

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

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar