Efek animasi UI

1. Mengimpor jQuery

Pastikan Anda telah mengimpor perpustakaan jQuery ke dalam proyek Anda. Anda dapat melakukannya dengan menambahkan kode berikut di dalam tag <head> HTML Anda:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Menampilkan atau Menghilangkan Elemen

Anda dapat membuat efek fadeIn (muncul) atau fadeOut (menghilang) pada elemen dengan menggunakan metode .fadeIn() dan .fadeOut(). Misalnya:

<button id="tampilkan">Tampilkan</button>
<button id="sembunyikan">Sembunyikan</button>
<div id="elemen">Ini adalah elemen yang akan diubah</div>

<script>
  $(document).ready(function() {
    $("#tampilkan").click(function() {
      $("#elemen").fadeIn();
    });

    $("#sembunyikan").click(function() {
      $("#elemen").fadeOut();
    });
  });
</script>

3. Menggerakkan Elemen

Anda juga dapat membuat elemen bergerak menggunakan metode .animate(). Misalnya, kode berikut akan menggerakkan elemen ke kanan sejauh 200 piksel:

<button id="gerakkan">Gerakkan</button>
<div id="elemen">Ini adalah elemen yang akan diubah</div>

<script>
  $(document).ready(function() {
    $("#gerakkan").click(function() {
      $("#elemen").animate({ left: '200px' }, 'slow');
    });
  });
</script>

4. Mengganti Ukuran Elemen

Anda dapat mengubah ukuran elemen dengan metode .animate() juga. Berikut adalah contoh mengubah lebar elemen:

<button id="ubahUkuran">Ubah Ukuran</button>
<div id="elemen">Ini adalah elemen yang akan diubah</div>

<script>
  $(document).ready(function() {
    $("#ubahUkuran").click(function() {
      $("#elemen").animate({ width: '300px' }, 'slow');
    });
  });
</script>

Itu adalah beberapa contoh dasar penggunaan jQuery untuk membuat efek animasi UI. Anda dapat menyesuaikan kode ini sesuai kebutuhan Anda dan mengeksplorasi lebih banyak efek animasi yang tersedia dalam jQuery.

PREVIOUS
NEXT