纯 JavaScript 淡入功能

Question

嗨朋友们，当我单击另一个 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;
}

代码 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

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

Answer 3

似乎您试图将元素转换为字符串。试试这个

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

这里发生的事情是，当计时器到达时我调用一个匿名函数，并从该函数执行我对 setto 的函数调用。

希望对您有所帮助。 乔纳斯

Answer 4

这里的问题是你正在使用 setTimeout 的 pass-a-string 方法。这基本上只是一个隐藏的eval。

值得注意的是，这是一种不好的做法，执行速度慢，并且存在安全风险。

（请参阅诸如此类的问题：setTimeout() with string or (anonymous) function reference? speedwise）

这导致您的问题的原因是因为"seto(" + ele + "," + i + ")" 将评估为"seto('[object HTMLDivElement]', 1)"。您确实想传递对ele 对象的引用——但是当您尝试将对象连接到字符串时，该值被转换为字符串。您可以通过使用 setTImeout 的传递函数方法来解决此问题。

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

我相信进行此更改将使您的 Code2 行为等同于 Code1。

Answer 5

以下是我的问题的完整答案

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

Answer 7

function hide(fn){
        var hideEle = document.getElementById('myElement');
        hideEle.style.opacity = 1;
        var fadeEffect = setInterval(function() {
        if (hideEle.style.opacity < 0.1)
        {
        hideEle.style.display='none';
        fn();
        clearInterval(fadeEffect);
        }
        else
        {
        hideEle.style.opacity -= 0.1;
        }
        }, 20);
}
function show(){
        var showEle = document.getElementById('myElement');
        showEle.style.opacity = 0;
        showEle.style.display='block';
            var i = 0;
            fadeIn(showEle,i);
            function fadeIn(showEle,i) {
                i = i + 0.05;
                seto(showEle,i);
                if (i<1){setTimeout(function(){fadeIn(showEle,i);}, 25);}
            }
            function seto(el,i)
            {
                el.style.opacity = i;
            }
}

hide(show);

Answer 8

我刚刚改进了 laaposto 的答案以包含回调。 我还添加了一个fade_out 函数。 它可以提高效率，但它非常适合我正在做的事情。

查看 laaposto 的答案以获取实施说明。 您可以将他小提琴中的 JS 替换为我的并查看示例。

谢谢拉波斯托！ 这对我需要零依赖项的项目很有帮助。

let el = document.getElementById( "div1" );

function fade_in( element, duration, callback = '' ) {
    element.style.opacity = 0;
    let last = +new Date();
    let tick = function() {
        element.style.opacity = +element.style.opacity + ( new Date() - last ) / duration;
        last = +new Date();
        if ( +element.style.opacity < 1 )
            ( window.requestAnimationFrame && requestAnimationFrame( tick ) ) || setTimeout( tick, 16 );
        else if ( callback !== '' )
            callback();
    };
    tick();
}

function fade_out( element, duration, callback = '' ) {
    element.style.opacity = 1;
    let last = +new Date();
    let tick = function() {
        element.style.opacity = +element.style.opacity - ( new Date() - last ) / duration;
        last = +new Date();
        if ( +element.style.opacity > 0 )
            ( window.requestAnimationFrame && requestAnimationFrame( tick ) ) || setTimeout( tick, 16 );
        else if ( callback !== '' )
            callback();
    };
    tick();
}

fade_out( el, 3000, function(){ fade_in( el, 3000 ) } );

干杯！