Cara menggunakan fade in animation css

Kali ini adalah seri lanjutan dari artikel sebelumnya yang disini (https://www.webhozz.com/blog/belajar-jquery-efek-hide-dan-show/).

Kita akan mempelajari Efek Fade dan Slide dari JQuery.

Untuk uraian lebih jelasnya berada pada deskripsi di bawah ini.

Efek Fade dan Slide

Efek Fade ini hampir sama dengan efek show dan hide pada tutorial sebelumnya yang pernah dibahas disini (https://www.webhozz.com/blog/belajar-jquery-efek-hide-dan-show/).

Hanya aja tampilan efek fade ini lebih pelan daripada Hide dan Show.

Berikut ini adalah metode-metode yang ada pada Fade, yaitu:
– FadeOut : menghilangkan elemen HTML
– FadeIn : menampilkan elemen HTML
– FadeToggle : menghilangkan dan menampilkan elemen HTML
– FadeTo : opacity alias tranparansi elemen HTML

Oke, langsung aja ya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Efek Fade</title>
    <style>
        div
        {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    
    <h2>Efek Fade</h2>

    <button class="fadeout">Fade Out</button>
    <button class="fadein">Fade In</button>
    <button class="fadetoggle">Fade Toggle</button>
    <button class="fadeto">Fade To</button>

    <div></div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () 
        {
            $(".fadeout").click(function (e) 
            { 
               $("div").fadeOut(); 
            });

            $(".fadein").click(function (e) 
            { 
               $("div").fadeIn(); 
            });

            $(".fadetoggle").click(function (e) 
            { 
               $("div").fadeToggle(); 
            });

            $(".fadeto").click(function (e) 
            { 
               $("div").fadeTo("slow", 0.5); 
            });
        });
    </script>    
</body>
</html>

Maka, beginilah hasilnya pada browser.

2. Lalu kita coba klik satu per satu tombol-tombol tersebut.

Dari berbagai tombol tersebut, maka kotak warna hijau pada gambar di atas akan muncul bahkan hilang.

Itu tergantung pilihan tombol.

Efek hilangnya lebih lembut dibandingkan dengan show hide.

Pada gambar di atas, itu adalah efek dari tombol Fade To.

Jika ditekan, maka kotak hijaunya jadi agak transparan.

3. Pada masing-masing efek kecuali efek “.fadeTo()”.

Bisa ditambahkan value, seperti berikut ini supaya efek hilang beserta tampilnya memiliki durasi saat efek tersebut bekerja.

Value tersebut adalah:

“slow”, yaitu membuat efeknya agak lambat.
2000, yaitu lama durasi. 2000 menandakan 2 detik. Artinya efeknya akan bekerja selama 2 detik. Untuk durasinya bisa ditambahkan atau dikurangi berdasarkan kebutuhan sendiri.

Value tersebut bisa ditambahkan pada “.nama_efeknya(value_disini)”.

Efek Slide

Efek slide adalah efek yang digunakan untuk memunculkan elemen HTML atau menghilangkan elemen HTML.

Kemunculan serta kehilangan yang ditampilkan pada efek ini adalah bergerak dari atas ke bawah.

Hampir sama kan dengan efek hide, show, serta efek fade??? Cuma yang beda adalah hasilnya.

Adapun metode dari efek slide ini adalah sebagai berikut.

Slide Up, menghilangkan elemen HTML dari bawah ke atas.
Slide Down, menampilkan elemen HTML dari atas ke bawah.
Slide Toggle, menghilangkan sekaligus menampilkan layaknya Slide Up dan Slide Down.

Oke, langsung aja kita coba.

Ketikkan script kode berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Efek Slide</title>
    <style>
        div
        {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    
    <h2>Efek Slide</h2>

    <button class="selaidup">Slide Up</button>
    <button class="selaidown">Slide Down</button>
    <button class="selaidtugel">Slide Toggle</button>
    

    <div></div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () 
        {
            $(".selaidup").click(function (e) 
            { 
               $("div").slideUp();
            });

            $(".selaidown").click(function (e) 
            { 
               $("div").slideDown();
            });

            $(".selaidtugel").click(function (e) 
            { 
               $("div").slideToggle();
            });
        });
    </script>    
</body>
</html>

2. Maka akan menghasilkan tampilan berikut ini.

3. Silahkan coba klik masing-masing tombol. Maka kotak hijau akan bereaksi berdasarkan tombol yang ditekan.