Membuat Animasi jQuery menggunakan Method hide() dan show()

Hello guys! Kembali lagi bersama Miniblog dari Inzaghi's Blog! Jika sebelumnya sudah membuat jQuery DOM Manipulation, kali ini kita akan membuat Animasi jQuery menggunakan Method hide() dan show().

Sumber : Tutorialsteacher.com dan Csveda.com

Metode jQuery hide() menyembunyikan dan metode show() menampilkan elemen yang ditentukan. Anda dapat menentukan fungsi kecepatan, pelonggaran, dan panggilan balik yang akan dijalankan ketika sembunyikan/tampilkan selesai.

Sintaks :

$('selector expression').hide(speed, easing, callback);
$('selector expression').show(speed, easing, callback);

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: red;
            height: 100px;
            width: 100px;
        }
        .yellowDiv {
            background-color: green;
            height: 100px;
            width: 100px;
            display:none;
        }
    </style>
    <script>
        $(document).ready(function () {
            
        $('#div1').hide(500, function () {
                    $('#msgDiv').append('Red div is hidden.\n')
                });

        $('#div2').show(500, function () {
                            $('#msgDiv').append('Green div is visible.')
                        });

        });
    </script>
</head>
<body>
    <h1>jQuery hide() & show() Method Demo</h1>
    <div id="msgDiv">
    </div>
    <div id="div1" class="redDiv">
    </div>

    <div id="div2" class="yellowDiv">
    </div>
</body>
</html>

Output :

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)

Membuat Animasi jQuery menggunakan Method hide() dan show()