纯JavaScript淡入功能

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

我知道有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;
}

解决方法:

基于this网站

编辑-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

标签：fadein,fade,javascript
来源： https://codeday.me/bug/20190923/1813696.html