Delay and fade in text with Javascript?
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.
精彩评论