使用Javascript延迟和淡入文本?

时间:2011-04-25 05:02:15

标签: javascript delay fadein fade

我的页面中有一行我想延迟2秒并将其淡入。有没有办法在没有jQuery的情况下执行此操作?

该网站是 http://theclockpage.com/ 文本是时钟下的小行,文本是通过javascript获得的,这就是为什么我不将它添加到问题中。

由于

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

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

我使用这个,Alex的功能不起作用。不透明度是一个字符串,不能是+ ='d,带整数。