通过在一段时间内更改不透明度在 JavaScript 中创建褪色图像答案

【问题标题】：Creating a fading image in JavaScript by changing opacity over a period of time通过在一段时间内更改不透明度在 JavaScript 中创建褪色图像
【发布时间】：2019-01-22 19:08:18
【问题描述】：

我是 JavaScript 新手。我真的很想找出一种简单的技术来改变位于另一个图像顶部的图像的不透明度，以逐渐显示底部图像。我想通过淡出来做到这一点。换句话说，随着时间的流逝，随着时间的推移逐渐从 style.opacity 属性中减去。

我想出了以下方法，但它似乎对我不起作用。

我的代码的当前状态改变了不透明度突然从 1 变为负数（-0.1、-0.2、-0.3 等）。这基本上会立即从顶部图像过渡到显示底部图像。

随着每一秒的过去，我想逐渐从 1 的不透明度变为（0.9、0.8、0.7 等）。

我想用纯 JavaScript 来完成这个。我在 CSS 中发现了类似的东西，但我不想使用这种方法。

我假设(var currentOp = document.getElementById('guitar2').style.opacity;) 将 currentOp 变量视为字符串。正因为如此，我尝试了将解析为浮动、进行减法并改回字符串的组合，随着时间的推移逐渐设置不透明度，但无济于事。

<!DOCTYPE>
<html>
<head>
    <style>
    #guitar1
    {
        position: relative;
        top: 0;
        left: 0;
    }

    #guitar2
    {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 1;
    }
    </style>
</head>
<body onload="runTime()">
    <script>

        var timer;

        function reduceOpacity()
        {
            var op = document.getElementById('guitar2');
            var currentOp = document.getElementById('guitar2').style.opacity;
            //currentOp = (parseFloat(currentOp) -  0.1).toString();
            currentOp -= 0.1;
            op.style.opacity = currentOp;
        }

        function runTime() 
        {
            timer = setInterval(reduceOpacity, 1000);
        }

    </script>
    <h4 id="header">Gibson Les Paul</h4>
    <div style="position: relative; left: 0; top: 0;">
        <img src="gibson1.png" id="guitar1" width="500" />
        <img src="gibson2.png" id="guitar2" width="500" />
    </div>
    <button type="button" onclick='document.getElementById("header").innerHTML = "yea"'>Click Me!</button>
</body>
</html>

【问题讨论】：

你总是可以使用纯 CSS：stackoverflow.com/a/11681331/3684265
您应该查看@imvain2 发布的链接。这是另一种我认为更容易遵循的类似方法：CSS3 Transition - Fade out effect

标签： javascript html css opacity fading

【解决方案1】：

使用getComputedStyle 和getPropertyValue 检索加载时元素样式的准确表示。

style.property 有不更新的习惯，有时会莫名其妙地拉取默认值，并且许多值在设置之前无法获取。如果您在原始示例中使用console.log(op.style.opacity)，您会看到它拉出一个空字符串，然后在将其转置为 0 后从那里倒数。

然后您使用clearInterval 停止该功能在该点之后继续运行。

    //get the style value with getComputedStyle, which is an accurate representation of 
    //all element styling on load.
    var currentOp = getComputedStyle(op).getPropertyValue("opacity");
    // clear the interval if opacity is less than or equal to 0
    if(currentOp <= 0) clearInterval(timer);

    console.log(currentOp);

<!DOCTYPE>
<html>
<head>
    <style>
    #guitar1
    {
        position: relative;
        top: 0;
        left: 0;
    }

    #guitar2
    {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 1;
    }
    </style>
</head>
<body onload="runTime()">
    <script>

        var timer;

        function reduceOpacity()
        {
            var op = document.getElementById('guitar2');
            
            //get the style value with getComputedStyle, which is an accurate representation of 
            //all element styling on load.
            var currentOp = getComputedStyle(op).getPropertyValue("opacity");
            // clear the interval if opacity is less than or equal to 0
            if(currentOp <= 0) clearInterval(timer);
            
            console.log(currentOp);
            //currentOp = (parseFloat(currentOp) -  0.1).toString();
            currentOp -= 0.1;
            op.style.opacity = currentOp;
        }

        function runTime() 
        {
            timer = setInterval(reduceOpacity, 1000);
        }

    </script>
    <h4 id="header">Gibson Les Paul</h4>
    <div style="position: relative; left: 0; top: 0;">
        <img src="gibson1.png" id="guitar1" width="500" />
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAP1BMVEWzs7P///+xsbG2traurq7y8vLLy8u+vr7Hx8fX19fExMTh4eHAwMDc3Nzn5+f8/Pzq6ur29vbT09Pv7++oqKiXjvXjAAAHrUlEQVR4nO2d6ZaDIAyFFVBbtVrrvP+zDgTcderGkpzJn6kL5H4QILbqRFHEMxbRNJZx+FvHnCYi43Ut//A6jmuSiEyjRVkc00QEwDjOzAd6iCMumogTKoqIMyZ6iAsiaogrPLQQV2koIW6w0EHcJKGC+AcHDcQ/KSggfmHAj/iVADviDv24EXepx4y4UztexN3KsSIe0I0T8ZBqjIgHNeNDPKwYG+IJvbgQT6nFhHhSKx7E00qxIF7QiQPxkkoMiBc1ho94WWHoiDfoCxvxFnUhI96kLVzE25SFinijrjARb1UVIuLNmsJDvF1RaIgW9ISFaEVNSIiWtISDaE1JKIgWdYSBaFVFCIiWNfhHtK7AN6ID/34RnXj3iejItz9EZ559ITr06wfRqVcfiI59ukd07tG1Qw9R49all5Hv0qmn2dudW28rsCvHHrMoN669ZsIunHu+mrHv3vflmnUB3gFtSwgA0K6IIABtyggE0J6QYABtSQkI0I6YoABtyAkM8H5BwQHeLSlAwHtFBQl4p6xAAe8TFizgXdICBrxHXNCAd8gLHPC6wOABr0pEAHhNJArAKzKRAJ4XigbwrFREgOfEogI8IxcZ4HHB6ACPSkYIeEw0SsAjspEC7heOFnCvdMSA+8SjBtwjHzngdwD0gB1CnG0cpvDeTcY/0tJ1Bpaqg7gBpTFlJ47927/tNDaJo0VILWOMCWXjEkMV/dmTYmxSYHKQLaJ4Xt/lIOepspwbBfLzZFbM5I7J+UykRZu0RcoEbOdpZ1xvLOoR0adqk/crEyOXfOz9UUZ9A5R9fdlC3DmD2VxN6KkSwOSn56g6kcgdn/GOZ9zZSxUQ7347Z6KSf4BjVA8ruhNaPaWyx7C4lN2x5qn52auvT7rtDmtxFwmlIqGVjYG4OpD01TPexIM1siMAqicsFoQsq0clcjYjHLybNXOdcCrqNGHMF4RC++vjVi/uTVVUtSnxjRCaKE6qqoUPJdskBP+bhPFpQPDxYPypJc0JNcjL7IGYrXOYaVJ56M2AsO/jJaFQfZ5wVYBDPK8QliIqIfZboQnrPmZKaDgQd74TNSGIL8SMELTUvUuWqg40o56JpBLRF0Io0ZrD0N2yseaEKnQFa/SnNcLopxla+SwhU5UsCNU0Upe6CdRma0LJ8DMjO/mBXtWE9Y+a34UmhC4cqmugAdYIdTjLJgPCn2490oTsp75K+MnTt0abRancKlT1b2hVoUVMTBHWb2Vtpvvw+ZJmgl5V8BrmKdWj+QahmYdhHOr6HnocGnEbee9OQmNsNtMwpTOD2aY/de5oOdP09mQs7wH6FvuwdUL2gQDZnGnOLxcDYT4nVFElxxg3/dGNigOEaTy5rNKxu0Goz90iLK+vFpVejsaEqv5UMDX8GhH1k9KCsK6UvU2UNmCXCKG+Kh8SgiK6kNRA6KnMEbbGhNA9KmtSTku1J54mPN1Js5kGNvSps7jWmxuETxgMo5nGtLGK3teFlGbWMWNCNg45WBnqcX4T9RPE9mqhQNu+BBzmWzNNC8vEcrXI3vGV9f4PQhj6gzGTb3x6nFT975ovhCoMHuYwU66SjdVC5PGwWkzXQ3VOcTEvnREKuGCBBGYwxQ0p2AeWfKZScL4SpdOcBkqkqgQTMOIf3YqvneicRtoj1kNhGaU5NBPf0n+G8K0WtBxa/Cng+sxMqqZbE3ldk30gBdd5aV3AzJCtZW06HUs5z4su2IGwUE44OHkX1bvuD6o4KcYzjcza4m5FvokQ7Dksg/1aZTppsC4Ota1m3tMSMCaBEKxk48wbgn25Wphqt77Lu0A4aTjVsCB4PDhz8f3qaVJCj6YxYbk4uEII7tvTnZg1SZP3W6xJwJo0V/v7tb9IEu2C8Ze+3mieTF/PmRJJU8oZX24IU0/TzVi80CWq0ojMOycZy+Bj+64+3CxXz74+ucwocaXe2ZzvRCHEdMukvZOvVsRwFpMXO3nWf+3AuhLCbPQFhoxbcFli5GZUYvAXzetjg7ih3n/7t39bt25MnTmKwRhv6rputpIOcxTxTxfmx7XtrAr774fkfwMm/zs++XsxyN9PQ/6eKPL3tZG/N5H8/aXk7xEmf583+Xv1yT9vQf6ZGfLPPZF/do3884fknyEl/xww+We5yT+PT/6dCuTfi0H+3Sbk309D/h1D5N8TRf5dX+Tf10b+nXvk35tI/t2XtiV4R7QvwDOiC/deEd0494joyrU3RHeOPSG6dOsF0a1TD4iuXTpHdN+mjj36GBdOffqZ2xx69bU+OfPrL8dw5NlnnujEt99c34F339dr1v37BhxuybWkwD+gZQ0hAFpVEQagxUANBdCaknAALWkJCdBKoIYFaEFPaIC3KwoP8OZADRHwVlVhAt6oK1TA2wI1XMCbtIUMeIu6sAFvCNTQAS8rDB/wokYMgJcCFQfgBZ1YAE8rxQN4MlAxAZ5SiwvwhF5sgIcDFR/gQc0YAQ+pxgl4IFCxAu5Wjhdwp3bMgLsCFTfgDv3YAb8S4Af8EqgUAP+koAH4BwcVwM1ApQO4wUIJcJWGFuBKoFIDXBDRA5wxUQScBCpNwDEXhf99tmqmFzN4/SRFQINYqxdv1tbu9fNsErGGDzyjCSgRM9mDv1k6auXmcfibAAAAAElFTkSuQmCC" id="guitar2" width="500" />
    </div>
    <button type="button" onclick='document.getElementById("header").innerHTML = "yea"'>Click Me!</button>
</body>
</html>

注意：我必须替换您的图片，因为它是本地文件。

【讨论】：

很好的帮助！我按照您的建议进行了一些更改，并且绝对有效！谢谢！
@MisterTams 没问题。这就是该网站的目的。如果您对此感觉良好，请投赞成票或单击答案旁边的半透明复选标记并接受它作为福音。快乐编码，伙计

【解决方案2】：

如果您不喜欢 JavaScript，我还有一个选择。 Animate.css 是一个令人难以置信的样式表，它可以以更简单的方式完成同样的事情。（加上它是纯 CSS 更好更统一的支持）

在头部导入这个

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

那么这里是你的相应代码：

   <div style="position: relative; left: 0; top: 0;">
    <img src="gibson1.png" id="guitar1"  width="500" />
    <img src="gibson2.png" id="guitar2" class="animated fadeOut delay-5s" style="animation-duration: 3s;" width="500" />
</div>

可能不是您正在寻找的答案，但它比 JS + JQ 动画要容易得多。

一切顺利！

【讨论】：

看起来很酷，我也会试试这个！但我想我的心是为这个特定的问题设置 JavaScript 的。很棒的输入！