jQuery : Efek Sliding

Metode slideUp() dan slideDown()

Metode jQuery slideUp() dan slideDown() digunakan untuk menyembunyikan atau menampilkan elemen HTML dengan secara bertahap mengurangi atau menambah tinggi mereka (mis. Dengan menggesernya ke atas atau ke bawah).

<script type="text/javascript">
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

Seperti metode efek jQuery lainnya, kalian dapat menentukan parameter durasi atau kecepatan untuk metode slideUp() dan slideDown() untuk mengontrol berapa lama animasi slide akan berjalan. Durasi dapat ditentukan baik menggunakan salah satu string yang telah ditentukan ‘slow’ atau ‘fast’, atau dalam beberapa milidetik; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat.

<script type="text/javascript">
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });

Kalian juga dapat menentukan callback function yang akan dieksekusi setelah metode slideUp() atau slideDown() selesai.

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

Metode slideToggle()

Metode jQuery slideToggle() menampilkan atau menyembunyikan elemen yang dipilih dengan menganimasikan height mereka sedemikian rupa sehingga jika elemen tersebut awalnya ditampilkan, itu akan bergeser ke atas; jika disembunyikan, itu akan menjadi slide ke bawah yaitu beralih antara metode slideUp() dan slideDown().

<script type="text/javascript">
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

Demikian pula, kalian dapat menentukan parameter durasi untuk metode slideToggle() seperti metode slideUp() dan slideDown() untuk mengontrol kecepatan animasi toggle slide.

<script type="text/javascript">
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

Demikian pula, kalian juga dapat menentukan callback function untuk metode slideToggle().

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>