使用 JavaScript 和 CSS 进行淡入和淡出

为 HTML 元素创建淡入和淡出效果可以增强 HTML 元素的淡入和淡出效果Web 应用程序的视觉吸引力。然而，实现这些效果有时可能具有挑战性，尤其是当淡入功能无法正常工作时。

在之前的实现中，淡入功能并未按预期增加元素的不透明度。相反，它仍然停留在 0.1。为了解决这个问题，我们提供了一种更有效的方法：

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);
}

该函数从初始不透明度0.1开始，逐渐递增直至达到1.0，从而产生平滑的淡入效果。

对于淡出，我们替换上面的代码与：

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op 
此函数不断减少不透明度，直到达到 0.1，然后隐藏元素以创建所需的淡出效果。
请记住，避免使用字符串作为 setInterval 或setTimeout 由于其潜在的安全风险。