Javascript淡入淡出，无需Jquery和CSS3

我真的在绞尽脑汁让背景图像的淡入淡出只在javascript中工作，而不使用JQuery和CSS3。我知道在Jquery中调用fadeIn（）和fadeOut（）有多容易。不幸的是，在我正在工作的项目中，它们不支持Jquery。我想支持你的信息从IE6的动画

单击链接，将从先前存在的背景中淡入淡出div的相应背景。我正在尝试使其基于setinterval工作，但无法完成。

function handleClick(evt){
    var element = document.getElementsByClassName(evt.target.id);
    fade(element);

}
 function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

功能手柄点击（evt）{
var元素=document.getElementsByClassName（evt.target.id）；
褪色（元素）；
}
功能衰减（元素）{
var op=1；//初始不透明度
变量计时器=设置间隔（函数（）{
如果（op
element.style
未定义，因为您没有引用正确的对象。请对函数调用使用
element[0]
：

function handleClick(evt){     
    var element = document.getElementsByClassName(evt.target.id);
    fade(element[0]);        
}





旁注：使用console.log（）和某些类型的开发人员控制台（如Chrome中包含的控制台）可以为调试带来奇迹。
getElementById
为您提供一个元素（或null），
getElementsByCassName
提供一个数组

function handleClick(evt){
    var element = document.getElementById(evt.target.id);
    fade(element);

}

你的目标似乎是使用ID，因此这应该能满足你的需要。我更新了整个内容：

但是，您应该意识到，这种衰落方法比使用GPU加速转换的成本要高得多

更新

你真的应该通过CSS3来实现这一点，因为所有现代浏览器都支持CSS3，而对于较旧的浏览器，只能使用show/hide。通过添加“fadeOut”类或通过JavaScript删除它来实现。CSS3（转换）处理所有其他事情，包括为较旧的浏览器隐藏和显示它

请记住：在使用JavaScript之前，尽可能多地使用CSS进行操作。这不仅更干净、更易于维护，而且CSS3动画渲染更流畅，因为它通常会增加GPU（视频卡）的硬度，而不仅仅是CPU的硬度。这在移动设备上尤其重要，而且是在任何设备上进行操作的标准、现代方式

有关更多详细信息，请参阅本Opera文章：
如果您不关心IE7-IE9，您可以使用非常有用的CSS3转换，如下所示：

    .element {
        -webkit-transition: opacity 0.3s ease;
    }
    .element[faded=true] {
        opacity: 0;
    }

function handleClick( evt )
{
  fadeOut( document.getElementById(evt.target.id), 400 );
}

没有jQuery，您将获得非常快的本机淡出效果

更新：
很抱歉，我没有彻底阅读《静止》的标题。
我将为您指出正确的方向，并将其余的编码留给您

setInterval（）函数就是这样工作的。它需要一个函数来执行，然后是它应该运行的毫秒数

setInterval(function() {
    if(fade(element[0]))
        clearInterval();
}, 50);

我为你做了一个JS提琴，它是半完整的，但展示了你应该如何制作淡出/淡出。
这是在Mac上的Chrome上测试的。不幸的是，不确定FF和IE

还有一些人指出，当通过任何以
s
结尾的函数获取内容时，您可以100%确定它为您提供了一个包含元素的数组，因此您必须引用所需的元素。在您的例子中，它是
元素[0]

希望我能进一步帮助您！：）祝您好运！
以下是我的fadeIn和fadeOut的完整实现，用于跨浏览器支持（包括IE6），它不需要jQuery或任何其他第三方JS库：

function fadeIn( elem, ms )
{
  if( ! elem )
    return;

  elem.style.opacity = 0;
  elem.style.filter = "alpha(opacity=0)";
  elem.style.display = "inline-block";
  elem.style.visibility = "visible";

  if( ms )
  {
    var opacity = 0;
    var timer = setInterval( function() {
      opacity += 50 / ms;
      if( opacity >= 1 )
      {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 1;
    elem.style.filter = "alpha(opacity=1)";
  }
}

function fadeOut( elem, ms )
{
  if( ! elem )
    return;

  if( ms )
  {
    var opacity = 1;
    var timer = setInterval( function() {
      opacity -= 50 / ms;
      if( opacity <= 0 )
      {
        clearInterval(timer);
        opacity = 0;
        elem.style.display = "none";
        elem.style.visibility = "hidden";
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 0;
    elem.style.filter = "alpha(opacity=0)";
    elem.style.display = "none";
    elem.style.visibility = "hidden";
  }
}

我修改了@Raptor007的函数

if (!Element.prototype.fadeIn) {
    Element.prototype.fadeIn = function(){
        let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
            func = typeof arguments[0] === 'function' ? arguments[0] : (
                typeof arguments[1] === 'function' ? arguments[1] : null
            );

        this.style.opacity = 0;
        this.style.filter = "alpha(opacity=0)";
        this.style.display = "inline-block";
        this.style.visibility = "visible";

        let $this = this,
            opacity = 0,
            timer = setInterval(function() {
            opacity += 50 / ms;
            if( opacity >= 1 ) {
                clearInterval(timer);
                opacity = 1;

                if (func) func('done!');
            }
            $this.style.opacity = opacity;
            $this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
    }
}

if (!Element.prototype.fadeOut) {
    Element.prototype.fadeOut = function(){
        let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
            func = typeof arguments[0] === 'function' ? arguments[0] : (
                typeof arguments[1] === 'function' ? arguments[1] : null
            );

        let $this = this,
            opacity = 1,
            timer = setInterval( function() {
            opacity -= 50 / ms;
            if( opacity <= 0 ) {
                clearInterval(timer);
                opacity = 0;
                $this.style.display = "none";
                $this.style.visibility = "hidden";

                if (func) func('done!');
            }
            $this.style.opacity = opacity;
            $this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
    }
}

不过，您可以随时查看JQuery源代码……谢谢DC.+1ed。我想淡出旧图像并淡入我的链接clicked@Ravi这就是我假设您正在尝试做的，但是我没有看到任何淡入代码。我使用了getElementsByClassName，因为我需要根据id clickedI添加的JSfid淡出相应的类dle。类的目的是重用。如果你一次使用所有类，它真的毫无用处。ID应该是唯一的。类是用于具有共同点的组的！我同意你的观点，但不幸的是，我的项目要求是支持IE6。我不能使用CSS3和JQuery：(
// fadeIn with default: 400ms
document.getElementById(evt.target.id).fadeIn();

// Calls the "alert" function with the message "done!" after 400ms - alert('done!');
document.getElementById(evt.target.id).fadeIn(alert);

// Calls the "alert" function with the message "done!" after 1500ms - alert('done!');
document.getElementById(evt.target.id).fadeIn(1500, alert);