使用Javascript延遲和淡入文本？

我的頁面中有一行我想延遲2秒並淡入。有沒有一種方法可以在沒有jQuery的情況下執行？使用Javascript延遲和淡入文本？

該網站是 http://theclockpage.com/ 與文中的時鐘下的小線，文本通過JavaScript，這就是爲什麼我不把它添加到問題得到。

感謝

2011-04-25 lisovaccaro

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。

來源

2011-04-25 05:06:49 alex

此功能不起作用。它不會正確地將字符串轉換爲要添加的整數。 textCont.style.opacity ='0';和textCont.style.opacity = parseInt（textCont.style.opacity）+ 0.05 +'';將工作。 – GAgnew 2011-04-25 05:12:16

@Greg jsFiddle必須做些有趣的事情然後：P – alex 2011-04-25 05:12:57

謝謝，這工作得很好！ – lisovaccaro 2011-04-25 05:19:47

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

身份證使用這一個，亞歷克斯的功能將無法正常工作。不透明度是一個字符串，不能是帶整數的+ ='d。

來源

2011-04-25 05:11:05 GAgnew

我沒有讀取任何字符串的不透明度。 – alex 2011-04-25 05:13:49

@alex這是問題所在。不透明度是一個字符串。無論如何，在CSS和webkit中，所以這個功能是跨瀏覽器的。 – GAgnew 2011-04-25 05:23:08

@Greg我將它設置爲'Number'' 0'。我永遠不會讀「不透明」屬性，只需設置它。 – alex 2011-04-25 05:28:29

使用Javascript延遲和淡入文本？

回答

相關問題