javascript - 纯 JavaScript 淡入功能

Question

嗨， friend 们，当我点击另一个 div 时，我想在一个 div 中淡入淡出，为此我正在使用以下代码。 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;
}

Code2 --- 不起作用

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