开发者

Delay and fade in text with Javascript?

开发者 https://www.devze.com 2023-02-28 17:29 出处:网络
There is a l开发者_JS百科ine in my page I want to delay 2 seconds and fade it in. Is there a way to do it without jQuery?

There is a l开发者_JS百科ine in my page I want to delay 2 seconds and fade it in. Is there a way to do it without jQuery?

The site is http://theclockpage.com/ And the text is the little line under the clock, the text is obtained through javascript that's why I don't add it to the question.

Thanks


var textCont = document.getElementById('clock').nextSibling;
textCont.style.opacity = 0;

setTimeout(function() {
    var opacity = 0,
        animate = setInterval(function() {

            opacity += 0.05;

            if (opacity >= 1) {
                clearInterval(animate);
            }

            textCont.style.opacity = opacity;

        }, 10);
}, 2000);

jsFiddle.


    var d = document.getElementById("box");

    function fadeOut(fadeScaler, hertz) {
        if (!this instanceof Element) return false;
        hertz = (!hertz) ? 60 : hertz; // Approx 60 hertz refresh rate

        var opacity = this.style.opacity
            opacity = "0";

        var t = setInterval(
           function() {
             opacity = parseInt(opacity) + fadeScaler + '';

             if (parseInt(opacity) >= 1) 
               clearInterval(t);
           },
           Math.floor(1000 / hertz)); // 1000 miliseconds / hertz = refresh rate
    };

fadeOut.apply(d, [.05]);

Id use this one, Alex's function will not work. Opacity is a string and cannot be +='d with an integer.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号