Pure JavaScript淡入功能

Question

嗨，朋友，我想淡入淡出當我點擊另一個股利，爲此，我使用下面的代碼。 Code1工作正常，但我需要使用Code2。

我知道有jQuery的，但我需要做到這一點在JavaScript

你能指導我，什麼樣的錯誤，我在做或者我需要改變什麼......

代碼1 - - 工作正常

function starter() { fin(); } 

function fin() 
{ 
    for (i = 0; i <= 1; i += 0.01) 
    { 
     i=Math.round(i*100)/100; 
     setTimeout("seto(" + i + ")", i * 1000); 
    } 
} 

function seto(opa) 
{ 
    var ele = document.getElementById("div1"); 
    ele.style.opacity = opa; 
} 

代碼2 ---不工作

function starter() 
{ 
    var ele = document.getElementById("div1"); 
    fin(ele); 
} 
function fin(ele) 
{ 
    for (i = 0; i <= 1; i += 0.01) 
    { 
     i=Math.round(i*100)/100; 
     setTimeout("seto(" + ele + "," + i + ")", i * 1000); 
    } 
} 

function seto(ele,opa) 
{ 
    ele.style.opacity = opa; 
} 

Answer 1

基於this網站

EDIT-1
新增功能，以便用戶可以指定動畫的持續時間（@Marzian評論）

你可以試試這個：

function fadeIn(el, time) { 
    el.style.opacity = 0; 

    var last = +new Date(); 
    var tick = function() { 
    el.style.opacity = +el.style.opacity + (new Date() - last)/time; 
    last = +new Date(); 

    if (+el.style.opacity < 1) { 
     (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); 
    } 
    }; 

    tick(); 
} 

var el = document.getElementById("div1"); 
fadeIn(el, 3000); //first argument is the element and second the animation duration in ms 

DEMO

Answer 2

看起來像你試圖將你的元素轉換爲字符串。試試這個

function starter() 
{ 
    var ele = document.getElementById("div1"); 
    fin(ele); 
} 
function fin(ele) 
{ 
    for (i = 0; i <= 1; i += 0.01) 
    { 
     i=Math.round(i*100)/100; 
     setTimeout(function() { setto(ele,i); }, i * 1000); 
    } 
} 

function seto(ele,opa) 
{ 
    ele.style.opacity = opa; 
} 

這到底是怎麼發生的，我稱之爲一個anonnymous功能，當計時器命中，並從功能，執行我的functioncall到setto。

希望它有幫助。 喬納斯

Answer 3

這裏的問題是您正在使用setTimeout的pass-a-string方法。這基本上只是一個隱藏的eval。

值得注意的是，這是一種糟糕的做法，執行速度緩慢以及安全風險。

（參見問題，比如這個：setTimeout() with string or (anonymous) function reference? speedwise）

這是造成你的問題的原因是因爲"seto(" + ele + "," + i + ")"是要評估爲"seto('[object HTMLDivElement]', 1)"。您確實想要傳遞對象ele對象 - 但是當您嘗試將對象連接到字符串時，該值將被轉換爲字符串。你可以通過使用setTImeout的pass-a-function方法來解決這個問題。

setTimeout(function() { seto(ele, i); }, i * 1000);

我相信使這一變化將使你的代碼2的行爲等同於代碼1。

Answer 4

下面是完整的回答我的問題

ANS1 --- DEMO

function fin() { 
    var i = 0; 
    var el = document.getElementById("div1"); 
    fadeIn(el,i); 
} 

function fadeIn(el,i) { 
    i = i + 0.01; 
    seto(el,i); 
    if (i<1){setTimeout(function(){fadeIn(el,i);}, 10);} 
} 

function seto(el,i) { 
    el.style.opacity = i; 
} 

ANS2 --- DEMO

function fin(){ 
    var i = 0; 
    var el = document.getElementById("div1"); 
    fadeIn(el,i); 
} 

function fadeIn(el,i) { 
    var go = function(i) { 
     setTimeout(function(){ seto(el,i); } , i * 1000); 
    }; 
    for (i = 0 ; i<=1 ; i = i + 0.01) go(i); 
} 

function seto(el,i) 
{ 
    el.style.opacity = i; 
} 

Answer 5

var div = document.getElementById('div'); 
div.style.transition="opacity 1s"; 
div.style.opacity="0"; 

Answer 6

我的版本

function fadeIn($element){ 
    $element.style.display="block"; 
    $element.style.opacity=0; 
    recurseWithDelayUp($element,0,1); 
} 
function fadeOut($element){ 
    $element.style.display="block"; 
    $element.style.opacity=1; 
    recurseWithDelayDown($element,1,0); 
} 

function recurseWithDelayDown($element,startFrom,stopAt){ 
    window.setTimeout(function(){ 
     if(startFrom > stopAt){ 
      startFrom=startFrom - 0.1; 
      recurseWithDelayDown($element,startFrom,stopAt) 
      $element.style.opacity=startFrom; 
     }else{ 
     $element.style.display="none" 
     } 
    },30); 
} 
function recurseWithDelayUp($element,startFrom,stopAt){ 
    window.setTimeout(function(){ 
     if(startFrom < stopAt){ 
      startFrom=startFrom + 0.1; 
      recurseWithDelayUp($element,startFrom,stopAt) 
      $element.style.opacity=startFrom; 
     }else{ 
     $element.style.display="block" 
     } 
    },30); 
}