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!