纯JavaScript淡入功能

Question

嗨朋友,当我点击另一个div时,我想淡入div,为此我使用下面的代码. 代码1工作正常,但我需要用代码2.

我知道有jQuery,但我需要在JavaScript中执行此操作

你能指导我,我正在做什么样的错误,或者我需要改变什么......

Code1 ---工作正常

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

基于这个网站

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

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