Cipta Pendedahan Div Berperingkat Menakjubkan dengan JavaScript setTimeout dan Peralihan CSS

Tutorial ini menunjukkan cara mendedahkan elemen halaman web secara beransur-ansur menggunakan fungsi setTimeout JavaScript dan peralihan CSS. Kesannya menghasilkan penampilan div yang menarik secara visual, berperingkat, setiap satunya pudar secara berurutan.

Ikhtisar

Contoh ini mempamerkan satu siri div, setiap satu mengandungi imej dan pautan, yang pudar satu demi satu. setTimeout mengawal masa, manakala CSS mengendalikan peralihan yang lancar.

Struktur HTML

HTML terdiri daripada beberapa div, masing-masing memegang imej dan pautan. Struktur ini sedia untuk menerima penggayaan dan fungsi JavaScript. (Nota: Coretan HTML yang disediakan tidak lengkap dan tiada teg penutup. Fail HTML yang lengkap dan berfungsi diperlukan.)

Peralihan CSS

CSS mentakrifkan peralihan visual:

<code class="language-css">.toggle-div {
  opacity: 0; /* Initially hidden */
  transition: opacity 1s ease; /* 1-second fade-in transition */
  height: 50px; /* Ensure visibility */
  background-color: lightblue; /* For visual clarity */
  margin: 10px 0;
  padding: 12px 80px;
  display: flex;
  align-items: center;
}

.toggle-div img {
  height: 100%;
  margin-right: 8px;
}

.toggle-div a {
  font-size: 20px;
}</code>

• opacity: 0;: Menyembunyikan div pada mulanya.
• transition: opacity 1s ease;: Menentukan peralihan kelegapan lancar 1 saat.

JavaScript untuk Pendedahan Berperingkat

Kod JavaScript mengatur rupa berperingkat:

<code class="language-javascript">// JavaScript to reveal divs
const divs = document.querySelectorAll('.toggle-div');

divs.forEach((div, index) => {
  setTimeout(() => {
    div.style.opacity = 1; // Make div visible
  }, index * 500); // Delay based on index (0.5 seconds per div)
});</code>

• document.querySelectorAll('.toggle-div'): Memilih semua elemen dengan kelas toggle-div.
• forEach: Berulang melalui setiap div.
• setTimeout: Menetapkan pemasa sebelum menetapkan opacity kepada 1, menyebabkan setiap div memudar selepas penangguhan. Kelewatan meningkat sebanyak 500 milisaat (0.5 saat) untuk setiap div berikutnya.

Penjelasan JavaScript

JavaScript menggunakan gelung forEach untuk lelaran melalui div yang dipilih. setTimeout adalah penting; ia memperkenalkan kelewatan sebelum menetapkan opacity kepada 1, sekali gus mewujudkan kesan pendedahan berperingkat. Kelewatan dikira sebagai index * 500, mengakibatkan kelewatan 0.5 saat antara setiap penampilan div.

Kesimpulan

Teknik ini, menggabungkan setTimeout dan peralihan CSS, menyediakan cara yang mudah namun berkesan untuk meningkatkan pengalaman pengguna dengan mencipta elemen beransur-ansur yang menarik secara visual. Eksperimen dengan pemasaan dan gaya yang berbeza untuk menyesuaikan kesannya dengan lebih lanjut. Pautan yang disediakan (https://www.php.cn/link/48fd3e91841d8619c84400e661895675) menawarkan demonstrasi langsung.

Atas ialah kandungan terperinci Cipta Pendedahan Div Berperingkat Menakjubkan dengan JavaScript setTimeout dan Peralihan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!