没有Jquery和CSS3,Javascript淡出淡出

Question

我正在挤压我的头,使得简单的淡入和淡出背景图像仅使用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);
}

​

http://jsfiddle.net/meetravi/2Pd6e/4/

Answer 1

getElementById给你一个元素(或null),getElementsByClassName给出一个数组.

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

}

您似乎的目标是使用ID,因此这应该满足您的需求.我更新了整个事情:ID

但是,您应该意识到这种衰落方法比使用GPU加速转换要昂贵得多.

更新
JSfiddle webkit opacity淡入淡出

Answer 2

以下是我对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";
  }
}

正如其他人所说,你需要修复你的handleClick以正确选择单个元素,然后将该元素传递给fade函数(为了清楚起见,我将其命名为fadeOut).jQuery淡入淡出的默认时间是400毫秒,所以如果你想模仿它,你的调用可能如下所示:

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

Answer 3

如果你不关心IE7 - IE9,你可以使用非常有用的CSS3过渡,如下所示:

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

没有jQuery,你将获得非常快速的原生淡出效果.

更新:对不起,我没有彻底阅读quiestion标题.