Fatal编程技术网

使用普通javascript淡入

javascript html css

使用普通javascript淡入,javascript,html,css,fade,Javascript,Html,Css,Fade,尝试使用h1元素的不透明度属性进行简单淡入。我正在学习javascript，所以想尝试使用普通javascript（是的，我知道使用jQuery要容易得多） 仅粘贴相关代码段： <body onload="fadeIn()"> ... <div class = "container"> <div class = "row"> <div class = "col-md-3">

尝试使用h1元素的不透明度属性进行简单淡入。我正在学习javascript，所以想尝试使用普通javascript（是的，我知道使用jQuery要容易得多）

仅粘贴相关代码段：

<body onload="fadeIn()">
    ...
    <div class = "container">

        <div class = "row">
            <div class = "col-md-3">
                <img class = "img-responsive" src="icons/Website_Logo.png">
            </div>

            <div class = "col-md-9 page-header">
                <h1 id="welcomeHeader" style="opacity:0">
                    Welcome to the world!
                </h1>
            </div>
        </div>

    </div>
    ...
    <script>
        function fadeIn() {
            var el = document.getElementById("welcomeHeader");
            var op = parseFloat(el.style.opacity);

            var timer = (function () {
                if(op >= 1.0)
                    clearInterval(timer);

                op += 0.1;
                el.style.opacity = op;
            }, 50);
        }

    </script>
</body>


...
欢迎来到世界！
...
函数fadeIn（）{
var el=document.getElementById（“welcomeHeader”）；
var op=parseFloat（el.style.opacity）；
变量计时器=（函数（）{
如果（op>=1.0）
清除间隔（计时器）；
op+=0.1；
el.style.opacity=op；
}, 50);
}
非常感谢您的帮助！谢谢

您需要更改函数以使用setInterval，如下所示：

var timer = setInterval(function () { // notice the setInterval added.
    if(op >= 1.0)
        clearInterval(timer);

    op += 0.1;
    el.style.opacity = op;
}, 50);
笔记： 我给你这个答案是为了帮助你学习你提到的javascript，否则， 当然，使用纯css会更好。
另外，确保css中的不透明度设置为0作为起点。

这不需要计时器-只需更改类即可。下面是一个例子：

CSS：

element{
    /* whatever styles you have */
}

element_faded{
    transition: opacity .5s;
    opacity: 50%; /* or whatever values you want */
}
javascript

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

// in order to trigger the fade, just change the class

element.className = "element_faded";
在转换过程中，原始类和新类的值之间会发生转换，因此如果您想要淡入，请将原始的
opacity
设置为
0%
，将新的设置为
100%
或高于零的值，具体取决于您希望最终的
opacity
设置为什么。另外，请记住，转换特性是由新类中的
transition
属性确定的

如果不使用CSS，这只会使事情变得更复杂，除非你需要做一些比简单的淡入淡出更复杂的事情。如果是这种情况，那么如果你觉得有冒险精神，可以使用
setInterval
或者类似
requestAnimationFrame

老实说，这并不是你第一次学习javascript时真正需要学习的东西。最终，只要你有信心在javascript中做一些更容易的事情（
setTimeout
等等都有自己奇怪的警告），这将非常容易。试着设定一个有意义的、实际的目标，并首先实现它，尽可能使用javscript/css/html的任何组合，很快你就会有足够好的基础知识来发现这样显而易见的事情。

为了调用计时器，你需要先调用setInterval函数。休息很好。这是一张工作票

代码段：

    function fadeIn() {
        var el = document.getElementById("welcomeHeader");
        var op = parseFloat(el.style.opacity);

        var timer = setInterval(function () {
            console.log('here');
            if(op >= 1.0)
                clearInterval(timer);

            op += 0.1;
            el.style.opacity = op;
        }, 50);
    }

设置间隔在哪里<代码>变量计时器=设置间隔（函数（）{…
我希望这会对你有所帮助..注意，转换出现在CSS3中。@MichalLeszczyk我不明白你的意思。CSS3和转换一样都很旧了。这些东西得到了广泛的支持，是web开发中的标准实践的一部分。我只是指出，这个解决方案绝对是最适合现代浏览器的解决方案，在旧浏览器中（IE9及以上版本）可能根本不受支持，这一事实应该考虑在内（作者需要支持哪种浏览器？）@MichalLeszczyk也许，但他只是在学习javascript，而不是做生产级的工作，所以我想学习标准方法，并留下例外（阅读：IE及其带来的所有痛苦）当然，这在技术上并不是纯javascript，但再一次，最好了解标准方法，而不是漫无目的地尝试实现一些模糊的“标准”这是一个很好的指示，只是你应该明确你的意思，否则一个新人根本不会理解你为什么提到CSS3。