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

IT技术 javascript css xhtml
2021-01-24 20:00:32

我想让一个 HTML div 标签淡入淡出。

我有一些淡出的代码，但是当我淡入时，div 的不透明度保持在 0.1 并且不会增加。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
    <title>Fade to Black</title>
    <script type="text/javascript">
        //<![CDATA[
        function slidePanel(elementToSlide, slideSource)
        {
            var element = document.getElementById(elementToSlide);

            if(element.up == null || element.up == false) {
                setTimeout("fadeOut(\"" + elementToSlide + "\")", 100);
                element.up = true;
                slideSource.innerHTML = "Bring it down";
            } else {
                setTimeout("fadeIn(\"" + elementToSlide + "\")", 100);
                element.up = false;
                slideSource.innerHTML = "Take it up";
            }
        }

        function fadeIn(elementToFade)
        {
            var element = document.getElementById(elementToFade);

            element.style.opacity += 0.1;
            if(element.style.opacity > 1.0) {
                element.style.opacity = 1.0;
            } else {
                setTimeout("fadeIn(\"" + elementToFade + "\")", 100);
            }
        }

        function fadeOut(elementToFade)
        {
            var element = document.getElementById(elementToFade);

            element.style.opacity -= 0.1;
            if(element.style.opacity < 0.0) {
                element.style.opacity = 0.0;
            } else {
                setTimeout("fadeOut(\"" + elementToFade + "\")", 100);
            }
        }
        //]]>
    </script>
 </head>
 <body>
    <div>
        <div id="slideSource"
              style="width:150px; height:20px;
                    text-align:center; background:green"
             onclick="slidePanel('panel', this)">
            Take It up
        </div>
        <div id="panel"
              style="width:150px; height:130px;
                    text-align:center; background:red;
                    opacity:1.0;">
            Contents
        </div>
    </div>
</body>
</html>

我做错了什么，淡入和淡出元素的最佳方法是什么？

6个回答

这是淡出元素的更有效方法：

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

你可以做相反的淡入

setInterval 或 setTimeout 不应将字符串作为参数

谷歌 eval 的弊端以了解原因

这是一种更有效的元素淡入淡出方式。

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 10);
}
当心：op 始终为零！
2021-03-12 20:00:32
截至 2015 年，我将使用requestAnimationFrame并使用 setTimeout 作为后备。
2021-03-12 20:00:32
如何让它淡入？
2021-03-16 20:00:32
@LohnClaidon 淡入，将op = 0更新条件设置if(op >= 1)为并将末尾的增量表达式更改为op += op*0.1。我没有测试过这个，但我肯定它会起作用。当然你删除了这display ='none'条线
2021-04-06 20:00:32
@RobertMolina 这是 Internet Explorer 上不透明度的属性。仅当您想支持旧浏览器时才添加它。
2021-04-09 20:00:32

这是西雅图忍者解决方案的简化运行示例。

var slideSource = document.getElementById('slideSource');

document.getElementById('handle').onclick = function () {
  slideSource.classList.toggle('fade');
}
#slideSource {
  opacity: 1;
  transition: opacity 1s; 
}

#slideSource.fade {
  opacity: 0;
}
<button id="handle">Fade</button> 
<div id="slideSource">Whatever you want here - images or text</div>

为什么要这样对自己？

jQuery：

$("#element").fadeOut();
$("#element").fadeIn();

我认为这更容易。

www.jquery.com

太棒了，我不知道你可以用 jQuery 这么轻松地做到这一点
2021-03-11 20:00:32
使用不良连接，您会注意到差异。@ItaiSagi
2021-03-17 20:00:32
因为当您只想淡入淡出时，您不想等待巨大的脚本加载。
2021-03-20 20:00:32
为什么要这样对自己。今日最佳评论：）
2021-03-25 20:00:32
相信我，我只是将我的整个 jQuery 代码更改为 vanilla JS，并将所有 jQuery 动画更改为 CSS3。你会注意到不同之处......所有 CSS3 动画都是 GPU 加速的，这使得它们变得流畅......
2021-04-05 20:00:32

这是我对 Javascript 和 CSS3 动画的尝试 所以 HTML：

 <div id="handle">Fade</div> 
 <div id="slideSource">Whatever you want images or  text here</div>

带有过渡的 CSS3：

div#slideSource {
opacity:1;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;     
transition: opacity 3s; 
}

div#slideSource.fade {
opacity:0;
}

Javascript 部分。检查 className 是否存在，如果存在，则添加类和转换。

document.getElementById('handle').onclick = function(){
    if(slideSource.className){
        document.getElementById('slideSource').className = '';
    } else {
        document.getElementById('slideSource').className = 'fade';
    }
}

只需单击，它就会淡入淡出。我建议使用 Itai Sagi 提到的 JQuery。我遗漏了 Opera 和 MS，因此我建议使用 prefixr 将其添加到 css 中。这是我第一次在 stackoverflow 上发帖，但它应该可以正常工作。

好的，我已经解决了

element.style.opacity = parseFloat(element.style.opacity) + 0.1;

应该使用而不是

element.style.opacity += 0.1;

同

element.style.opacity = parseFloat(element.style.opacity) - 0.1;

代替

element.style.opacity -= 0.1;

因为不透明度值存储为字符串，而不是浮点数。我仍然不确定为什么添加有效。

您也可以使用element.style.opacity = +element.style.opacity + 0.1;. 一元加号运算符将字符串转换为数字（在这种情况下为浮点数）
2021-03-13 20:00:32
你应该避免在 DOM 中存储值，除非你不关心性能......
2021-03-31 20:00:32
其它你可能感兴趣的问题
上一篇如何在没有尾调用优化的情况下用函数式编程替代方法替换 while 循环？ 下一篇在 jQuery 中获取鼠标滚轮事件？