Tutorial JQUERY Part 4: Mengenal Effect JQuery

Memahami Effect JQuery

Setelah mengenal tentang event atau kejadian pada jQuery pada artikel sebelumnya. Dimana tedapat jenis-jenis kejadian yang terjadi pada komponen html seperti double clik, mouse dan lain sebagainya saatnya kita membahas tentang effek yang terjadi ketika sebuah event dilakukan. Tentang event silahkan kunjungi kembali artikel sebelumnya.

https://barintek.blogspot.com/2023/02/tutorial-jquery-part-3-menangani-event.html

Effect merupakan perubahan yang terjadi seketika aksi dilakukan. Seperti perubahan yang terjadi pada tombol ketika tombol tersebut di klik. JQuery telah menyediakan library yang memberikan function yang berhubungan dengan effek. Kita hanya perlu mengakses effect tersebut. Berikut daftar effek yang terjadi pada jQuery:

NO	EFFECT	FUNGSI
1	.show	Menampilkan element
2	.hide	Menyembunyikan element
3	.toggle	Menampilkan dan menyembunyikan element
4	.fadeln	Menampilkan elemen dengan efek memudar
5	.fadeOut	Menyembunyikan elemen dengan efek memudahr
6	.fadeToggle	Menampilkan dan menyembunyikan element dengan efek memudar
7	.slideDown	Menampilkan element dengan evek slide
8	.slideUp	Menyembunyikan element dengan efek slide
9	.slideToggle	Menampilkan dan menyembunyikan element dengan efek slide
10	.animate	Membuat efek animasi pada element

Cara Implementasikan Effect jQuery

Nah cara menggunakan effec dari jQuery dapat dilihat dari contoh dibawah ini:

<head>
  <title>Belajar jQuery Barintek</title>
  <script src="jquery.3.6.3.js"></script>
</head>
<body>
  <h1>selamat Belajar</h1>
  <button id="tombol">Click disini!</button>
  <p class="kalimat">Sedang Belajar jQuery di Barintek</p>
</body>
<script>
  $(document).ready(function () {
    $("#tombol").click(function () {
      $(".kalimat").hide();
    });
  });
</script>

Dari contoh diatas, kita memberikan sebuah effect pada class kalimat. Class tersebut akan di sembunyikan jika aksi klik terjadi pada komponen button. Anda dapat mengganti effek tersebut sesuai dengan effect yang ditulis didalam tabel diatas.

Memberikan Durasi Waktu Pada Effek fade

Effect fade merupakan efek yang akan membuat sebuah element memudar. Kita dapat memberikan durasi waktu untuk efek tersebut. Kita dapat memberikan nilai berupa slow, fast atau dapat juga memberikan nilai angka. Perhatikan contoh berikut:

<head>
  <title>Belajar jQuery Barintek</title>
  <script src="jquery.3.6.3.js"></script>
</head>
<body>
  <h1>selamat Belajar</h1>
  <button id="slow">efek Slow!</button>
  <button id="fast">efek fast!</button>
  <button id="angka">efek angka!</button>
  <p class="kalimat">Sedang Belajar Efek JQuery</p>
</body>
<script>
  $(document).ready(function () {
    $("#slow").click(function () {
      $(".kalimat").fadeToggle("slow");
    });
    $("#fast").click(function () {
      $(".kalimat").fadeToggle("fast");
    });
    $("#angka").click(function () {
      $(".kalimat").fadeToggle("500");
    });
  });
</script>

Memberikan Efek Slide di JQuery

Efek Slide adalah kemunculan sebuah element dari dengan cara turun atau naik. Didalam efek slide dapat juga kita berikan nilai slow, fast dan angka seperti efek pade. Berikut contohnya:

<head>
  <title>Belajar jQuery Barintek</title>
  <script src="jquery.3.6.3.js"></script>
</head>
<body>
  <h1>selamat Belajar</h1>
  <button id="slow">efek Slow!</button>
  <button id="fast">efek fast!</button>
  <button id="angka">efek angka!</button>
  <p class="kalimat">Sedang Belajar Efek JQuery</p>
</body>
<script>
  $(document).ready(function () {
    $("#slow").click(function () {
      $(".kalimat").slideUp("slow");
    });
    $("#fast").click(function () {
      $(".kalimat").slideDown("1000");
    });
    $("#angka").click(function () {
      $(".kalimat").slideToggle("500");
    });
  });
</script>

Demikianlah sekilas tentang efek didalam jQuery. Pembahasan efek ini akan lebih mendalam pada artikel selanjutnya. Terimakasih

Tutorial JQUERY Part 4: Mengenal Effect JQuery

Baringin

Post a Comment

CRUD : PART 2 | Membuat Tabel di Database dan Seeder di Laravel 11

Made with Love by

Contact form

Tutorial JQUERY Part 4: Mengenal Effect JQuery

Baringin

You Might Like

Post a Comment

Contact form