下面是一個簡單的HTML + CSS + JavaScript（沒有涉及jQuery）文檔。如果有人測試它，他會看到有一個簡單的文本會在窗口加載時消失並移動。如何在不使用jQuery的情況下在函數中進行淡入淡出？（JavaScript）

代碼說明：

那麼它的一個非常簡單的代碼。在html中有一個段落，並用css將它的不透明度設置爲0.現在使用JS，不透明度屬性每10毫秒改變0.01。但我用一些全局變量來做到這一點（我不想要的東西）。

我想要什麼？

我想製作一個功能，如fadeIn(element, changeOnEveryMiliSecond).代替element我希望淡入的任何元素的ID和changeOnEveryMiliSecond不透明度每隔10毫秒變化一次。任何人都可以指導我如何使用與我的類似的代碼並且不使用全局變量嗎？另外我不想使用任何類似jQuery的庫。我可以這樣做的，但我只是做我的JavaScript概念更好，並找出如何做事;）這裏是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Fade In</title> 
     <style type="text/css"> 
     html{ 
      height: 100%; 
      width: 100%; 
      margin: 0 auto; 
      padding: 0; 
     } 
     #main_body{ 
      background: black; 
     } 
     #text{ 
      font: normal 2em ebrima; 
      color: white; 
      opacity: 0; 
      position: absolute; 
     } 
     </style> 
     <script type="text/javascript"> 
      var op = 0; 
      var pos = 0; 
      function main(){ 
       if(op != 1) op = op + 0.01; 
       if(pos != 50) pos = pos + 1; 
       document.getElementById('text').style.opacity = op; 
       document.getElementById('text').style.top = pos + 'px'; 
      } 
      window.addEventListener('load', setInterval(main, 10), false); 
     </script> 
    </head> 

    <body id="main_body"> 
     <p id="text">Hello World</p> 
    </body> 

</html>

來源

2014-02-27 Faiz Ahmed

這裏有描述一個解決方案：http://youmightnotneedjquery.com/#fade_in – keaukraine

這會爲您提供100％的工作，任何問題都問我

<script type="text/javascript"> 

    function fadeIn(element, changeOnEveryMiliSecond){ 
     ChangeInterval = setInterval(
     function(){ 
     Opacity = window.getComputedStyle(element).getPropertyValue("opacity"); 
     if(Opacity >= 1){ 
        clearInterval(ChangeInterval); 
        } 
     element.style.opacity = parseFloat(Opacity) + changeOnEveryMiliSecond; 

     } 
     ,10); //set the interval for repeat 
    } 

     window.addEventListener('load', function(){fadeIn(document.getElementById('text'),0.01);}, false); 

    </script>

來源

2014-02-27 11:08:21 sanjeev

我需要一段時間來弄清楚發生了什麼！ –

把你的時間，如果擊中的地方不尋求幫助 – sanjeev

在JS斌'7號線：（不透明度> = 1）clearInterval（ChangeInterval）？ ''; ---期望一個賦值或函數調用，而是看到一個表達式。第11行：，10）; //設置重複間隔---逗號警告可以用「laxcomma」 10 線被關閉：} ---壞斷行前「」' –

基本上，第一個問題是，你傳遞給addEventListener的函數返回而不是函數。

變化

window.addEventListener('load', setInterval(main, 10), false);

到

window.addEventListener('load', function(){setInterval(main, 10)}, false);

的另一個問題是，你永遠不會停止你的循環。這工作，但它是昂貴的。您可以刪除間隔clearInterval或使用基於setTimeout的解決方案。

Demonstration

來源

2014-02-27 10:39:19

沒有我的代碼的任何問題我只是想讓它成爲一個功能。所以我不必一次又一次地做出這樣的功能。沒有使用全局變量 –

是的，有一個問題：您並未等待頁面加載。它不會與圖像一起工作。 –

避免全局變量的最簡單的解決方案是使用[IIFE]（http://benalman.com/news/2010/11/immediately-invoked-function-expression/）。 –

您也可以使用（純）CSS動畫：

#text{ 
    top: 0; 
    font: normal 2em ebrima; 
    color: white; 
    position: absolute; 
    -webkit-animation: moveIn 2s forwards; /* Safari 4+ */ 
    -moz-animation: moveIn 2s forwards; /* Fx 5+ */ 
    -o-animation:  moveIn 2s forwards; /* Opera 12+ */ 
    animation:   moveIn 2s forwards; /* IE 10+ */ 

} 
@-webkit-keyframes moveIn { 
    0% { opacity: 0; top: 0p; } 
    100% { opacity: 1; top: 50px; } 
} 
@-moz-keyframes moveIn { 
    0% { opacity: 0; top: 0p; } 
    100% { opacity: 1; top: 50px; } 
} 
@-o-keyframes moveIn { 
    0% { opacity: 0; top: 0p; } 
    100% { opacity: 1; top: 50px; } 
} 
@keyframes moveIn { 
    0% { opacity: 0; top: 0p; } 
    100% { opacity: 1; top: 50px; } 
}

另外，還要檢查demo。

來源

2014-02-27 10:54:18 LinkinTED

如何在不使用jQuery的情況下在函數中進行淡入淡出？ （JavaScript）

代碼說明：

我想要什麼？

回答

相關問題

如何在不使用jQuery的情況下在函數中進行淡入淡出？（JavaScript）