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