jQuery Academy · Pelajaran

Efek Toggle dan Slide Tingkat Lanjut

Kuasai penggunaan tingkat lanjut .slideToggle(), .fadeToggle(), dan .animasi() untuk membuat efek tampil/sembunyi serta transisi yang halus, responsif, dan menarik secara visual

Efek Toggle dan Slide Tingkat Lanjut adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Selamat Datang di Toggle Tingkat Lanjut!

Dalam pelajaran ini, kita akan membahas lebih dalam metode jQuery yang andal untuk membuat efek tampil/sembunyi yang dinamis. Anda akan menguasai .slideToggle(), .fadeToggle(), serta cara menggunakan .animate() untuk transisi kustom.

Teknik-teknik ini penting untuk membangun antarmuka pengguna yang interaktif dan menarik secara visual.

Menggeser Elemen dengan slideToggle()

Metode .slideToggle() menganimasikan tinggi elemen yang cocok, sehingga elemen tersebut bergeser ke atas atau ke bawah. Jika elemen terlihat, elemen akan bergeser ke atas untuk disembunyikan. Jika tersembunyi, elemen akan bergeser ke bawah untuk ditampilkan.

Metode ini sangat cocok untuk menu yang dapat diciutkan atau bagian konten yang dapat diperluas. Cobalah menjalankan contoh ini:

// HTML for context:
// <button id="toggleButton">Toggle Panel</button>
// <div id="myPanel" style="background-color: lightblue; padding: 10px;">
//   <p>This is a sliding panel!</p>
// </div>

$(document).ready(function() {
  $("#toggleButton").click(function() {
    $("#myPanel").slideToggle();
  });
});

Menyesuaikan slideToggle()

Anda dapat mengatur kecepatan animasi .slideToggle() dengan memberikan durasi (milidetik atau 'slow', 'fast'). Anda juga dapat memberikan fungsi callback yang dijalankan setelah animasi selesai.

.slideToggle(duration)
.slideToggle(duration, callback)

Bereksperimenlah dengan kecepatan pada kode di bawah ini:

// HTML for context:
// <button id="speedToggleBtn">Toggle Fast</button>
// <p id="speedPanel" style="background-color: #e0ffe0; padding: 10px;">
//   I slide fast and then alert!
// </p>

$(document).ready(function() {
  $("#speedToggleBtn").click(function() {
    $("#speedPanel").slideToggle("fast", function() {
      alert("Animation finished!");
    });
  });
});

Memudarkan Elemen dengan fadeToggle()

Serupa dengan .slideToggle(), metode .fadeToggle() menampilkan atau menyembunyikan elemen yang cocok dengan menganimasikan opasitasnya. Jika elemen terlihat, elemen akan memudar hingga menghilang. Jika tersembunyi, elemen akan memudar hingga terlihat.

Metode ini menghasilkan efek transisi yang halus dan transparan. Lihat cara kerjanya:

// HTML for context:
// <button id="fadeToggleBtn">Toggle Fade</button>
// <div id="fadePanel" style="background-color: #ffe0e0; padding: 10px;">
//   <p>This panel fades in and out!</p>
// </div>

$(document).ready(function() {
  $("#fadeToggleBtn").click(function() {
    $("#fadePanel").fadeToggle();
  });
});

Menyesuaikan fadeToggle()

Sama seperti .slideToggle(), Anda dapat menyesuaikan kecepatan dan menambahkan fungsi callback ke .fadeToggle(). Dengan demikian, Anda dapat merangkai tindakan atau menjalankan tugas setelah proses pemudaran selesai.

.fadeToggle(duration)
.fadeToggle(duration, callback)

Amati pemudaran lambat dan perubahan warnanya:

// HTML for context:
// <button id="customFadeBtn">Toggle Custom Fade</button>
// <p id="customFadePanel" style="background-color: #e0e0ff; padding: 10px;">
//   I fade slowly and change color!
// </p>

$(document).ready(function() {
  $("#customFadeBtn").click(function() {
    $("#customFadePanel").fadeToggle(1000, function() {
      $(this).css("color", "purple");
    });
  });
});

Menggabungkan Geser dan Pudar

Anda dapat menggabungkan .slideToggle() dan .fadeToggle() untuk menghasilkan efek yang lebih kompleks. Misalnya, Anda mungkin ingin elemen bergeser ke bawah sekaligus memudar hingga terlihat, atau sebaliknya.

Jika dipanggil secara berurutan, keduanya menerapkan efek satu demi satu. Untuk efek yang benar-benar berlangsung bersamaan, .animate() sering kali lebih disarankan (kita akan melihatnya selanjutnya!).

// HTML for context:
// <button id="mixedToggleBtn">Toggle Mixed</button>
// <div id="mixedPanel" style="background-color: #ffffe0; padding: 10px;">
//   <p>I will slide and fade!</p>
// </div>

$(document).ready(function() {
  $("#mixedToggleBtn").click(function() {
    $("#mixedPanel").slideToggle(500);
    $("#mixedPanel").fadeToggle(500);
  });
});

Toggle Sederhana dengan Animasi

Ingat metode dasar .toggle()? Metode ini hanya menampilkan atau menyembunyikan elemen. Namun, metode ini juga dapat menerima parameter durasi dan callback, sama seperti .slideToggle() dan .fadeToggle().

Jika digunakan dengan parameter animasi, .toggle() secara bawaan pada dasarnya menjadi .fadeToggle().

// HTML for context:
// <button id="simpleToggleBtn">Toggle with Animation</button>
// <p id="simpleTogglePanel" style="background-color: #f0f0f0; padding: 10px;">
//   I toggle with a default fade effect.
// </p>

$(document).ready(function() {
  $("#simpleToggleBtn").click(function() {
    $("#simpleTogglePanel").toggle("slow", function() {
      console.log("Toggle animation done!");
    });
  });
});

Membuat Efek Toggle Kustom

Untuk mendapatkan kontrol penuh, gunakan metode .animate(). Anda dapat menganimasikan hampir semua properti CSS yang memiliki nilai numerik. Untuk membuat efek toggle kustom, Anda dapat menganimasikan properti seperti height, opacity, atau bahkan left/top.

Kuncinya adalah menganimasikan properti ke nilai tertentu atau menggunakan kata kunci khusus 'toggle' untuk properti seperti height atau width.

// HTML for context:
// <button id="customAnimateBtn">Custom Animate Toggle</button>
// <div id="customAnimatePanel" style="background-color: lightgreen; padding: 10px; height: 100px; overflow: hidden;">
//   <p>I animate my height to toggle!</p>
// </div>

$(document).ready(function() {
  $("#customAnimateBtn").click(function() {
    $("#customAnimatePanel").animate({
      height: 'toggle' // Animates height to 'toggle' (show/hide)
    }, 500);
  });
});

Animasi Kustom Secara Bersamaan

.animate() benar-benar unggul ketika Anda perlu mengubah beberapa properti CSS sekaligus untuk menghasilkan efek toggle gabungan. Anda dapat menganimasikan height dan opacity secara bersamaan untuk menghasilkan efek geser dan pudar.

Ingatlah untuk menangani properti display jika Anda ingin elemen benar-benar menghilang dari tata letak setelah opasitasnya dianimasikan menjadi 0.

// HTML for context:
// <button id="combinedAnimateBtn">Combined Toggle</button>
// <div id="combinedAnimatePanel" style="background-color: lightcoral; padding: 10px; height: 100px; opacity: 1; overflow: hidden;">
//   <p>I slide AND fade!</p>
// </div>

$(document).ready(function() {
  $("#combinedAnimateBtn").click(function() {
    var panel = $("#combinedAnimatePanel");
    if (panel.is(":visible")) {
      panel.animate({
        height: '0px',
        opacity: '0'
      }, 500, function() {
        $(this).hide(); // Ensure display: none after animation
      });
    } else {
      panel.show().animate({ // Show first, then animate
        height: '100px',
        opacity: '1'
      }, 500);
    }
  });
});

Uji Pengetahuan Anda tentang Toggle

Manakah dari metode jQuery berikut yang dapat digunakan untuk membuat efek tampil/sembunyi dengan animasi pada sebuah elemen?

Ringkasan Toggle & Animate

Bagus! Anda telah menguasai teknik jQuery tingkat lanjut untuk membuat efek tampil/sembunyi yang dinamis.

Kita mempelajari .slideToggle() untuk efek geser vertikal.
Kita menggunakan .fadeToggle() untuk transisi opasitas yang halus.
Kita melihat bahwa .toggle() juga dapat menganimasikan elemen.
Yang terpenting, Anda belajar menggunakan .animate() untuk efek toggle yang sepenuhnya kustom dan gabungan, dengan kontrol terperinci atas beberapa properti CSS.

Teruslah berlatih untuk membangun UI interaktif yang memukau!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Efek Toggle dan Slide Tingkat Lanjut” gratis?

Ya — teks lengkap “Efek Toggle dan Slide Tingkat Lanjut” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Efek Toggle dan Slide Tingkat Lanjut”?

Kuasai penggunaan tingkat lanjut .slideToggle(), .fadeToggle(), dan .animasi() untuk membuat efek tampil/sembunyi serta transisi yang halus, responsif, dan menarik secara visual Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.

Berapa lama pelajaran “Efek Toggle dan Slide Tingkat Lanjut” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke jQuery Academy