Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mencapai Kesan Fade-In dan Fade-Out Lancar dalam JavaScript dan CSS?
Fade-In dan Fade-Out Menggunakan JavaScript dan CSS
Mencipta kesan fade-in dan fade-out untuk elemen HTML boleh meningkatkan daya tarikan visual aplikasi web. Walau bagaimanapun, melaksanakan kesan ini kadangkala boleh mencabar, terutamanya apabila fungsi fade-in tidak berfungsi dengan betul.
Dalam pelaksanaan sebelumnya, fungsi fade-in tidak meningkatkan kelegapan elemen seperti yang diharapkan. Sebaliknya, ia kekal terperangkap pada 0.1. Untuk menangani isu ini, kami menyediakan kaedah yang lebih cekap:
<code class="javascript">function unfade(element) { var op = 0.1; // initial opacity element.style.display = 'block'; var timer = setInterval(function () { if (op >= 1) { // If opacity reaches 1 clearInterval(timer); } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; }, 10); }</code>
Fungsi ini bermula dengan kelegapan awal 0.1 dan secara beransur-ansur menambahnya sehingga mencapai 1.0, menghasilkan kesan pudar masuk yang lancar.
Untuk fade-out, kami menggantikan kod di atas dengan:
<code class="javascript">function fade(element) { var op = 1; // initial opacity var timer = setInterval(function () { if (op <= 0.1) { // If opacity drops below 0.1 clearInterval(timer); element.style.display = 'none'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); }</code>
Fungsi ini mengurangkan kelegapan secara berterusan sehingga mencapai 0.1, kemudian menyembunyikan elemen untuk mencipta kesan fade-out yang diingini.
Ingat, adalah penting untuk mengelak daripada menggunakan rentetan sebagai argumen untuk setInterval atau setTimeout kerana potensi risiko keselamatannya.
Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kesan Fade-In dan Fade-Out Lancar dalam JavaScript dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!