使用javascript沒有jQuery的淡入淡出效果？

Question

從JavaScript派生的jQuery具有創建淡入淡出效果的美麗方法。

但我怎樣才能達到相同的高度使用我自己的自定義JavaScript代碼？

我想要最簡單的一個..它淡出爲零。

Answer 1

爲什麼不使用CSS3轉換？

...

opacity: 100; 
-webkit-transition: opacity .5s ease-out; 
-moz-transition: opacity .5s ease-out; 
-o-transition: opacity .5s ease-out; 
transition: opacity .5s ease-out; 

Answer 2

試試這個：

function fade(what, duration) { 
    what.opct = 100; 
    what.ih = window.setInterval(function() { 
    what.opct--; 
    if(what.opct) { 
     what.MozOpacity = what.opct/100; 
     what.KhtmlOpacity = what.opct/100; 
     what.filter = "alpha(opacity=" + what.opct + ")"; 
     what.opacity = what.opct/100; 
    }else{ 
     window.clearInterval(what.ih); 
     what.style.display = 'none'; 
    } 
    }, 10 * duration); 
} 

這樣使用它：

fade(htmlobject, 2); // delay is in second 

Answer 3

創建動畫是一個相當棘手的任務。處理CSS屬性時必須注意瀏覽器的差異。然後你必須確定你知道如何使用定時器，因爲它們在Javascript中通常不是很準確。總之，編寫簡單的淡入淡出效果會很容易，但要做出與jQuery相媲美的工作將需要大量的工作。

你可以閱讀this（好吧，你必須等待它完成）才能更好地瞭解jQuery的結構，然後嘗試自己動手。

Answer 4

您可以使用十六進制或普通十進制來定義顏色。使用十六進制系統

BODY {background-color:#FF00FF;} 

和示例使用十進制

BODY {background-color:rgb(51,0,102)} 

定義RGB（255,255,255）的一個例子表示顏色白色，代碼RGB（0,0,0）代表黑色。

那麼如何才能使淡出效果？那麼，最簡​​單的方法是使用方式與十進制代碼：

<script type="text/javascript"> 
var red = 255; 
var green = 255; 
var blue = 255; 
var interVal = window.setInterval("fadeEffect()", 1000); 
function fadeEffect() { 
    if (red > 0 && green > 0 && blue > 0) red--; 
    if (red == 0 && green > 0 && blue > 0) green--; 
    if (red == 0 && green == 0 && blue > 0) blue--; 
    if (red == 0 && green == 0 && blue == 0) window.clearInterval(interVal); 

    //Creates the new code of color 
    colorAttr = "rgb("+red+","+green+","+blue+")"; 
    //However or whereever you make the new color public 
    ... 

    //Reset the first two colors 
    if (red == 0) red == 255; 
    if (green == 0) green = 255; 
} 
</script> 

希望這將回答您的問題或幫助你拿出你自己的想法。如果你想使用十六進制數字，那麼你必須在創建新參數之前轉換成十六進制代碼。

Answer 5

下面是使用JavaScript淡入和淡出效果的純粹實現。

1. 。利用CSS Opacity屬性
2. 期間淡出過程中，我們減少0.9到0
3. 的不透明度值同樣淡入過程增加0.0至0。9
4. 對於IE其10〜90

5. 使用的setTimeout（）函數調用淡入淡出功能遞歸地延遲和增加/減少的不透明度值，以實現淡入淡出效果

   function fadeOut(id,val){ if(isNaN(val)){ val = 9;} 
       document.getElementById(id).style.opacity='0.'+val; 
       //For IE 
       document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; 
       if(val>0){ 
       val–; 
       setTimeout('fadeOut("'+id+'",'+val+')',90); 
       }else{return;} 
   } 
   
   function fadeIn(id,val){ 
   // ID of the element to fade, Fade value[min value is 0] 
       if(isNaN(val)){ val = 0;} 
       document.getElementById(id).style.opacity='0.'+val; 
       //For IE 
       document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; 
       if(val<9){ 
       val++; 
       setTimeout('fadeIn("'+id+'",'+val+')',90); 
       }else{return;} 
   } 
   

你可以有關演示和詳細示例，請參閱How To Cross Fade Anything With JavaScript。

乾杯 -Clain