Question

我真的在挤压我的脑袋，只使用没有JQuery和CSS3的javascript进行简单的淡入和淡出背景图像工作。我知道在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，因此这应该满足您的需求。我更新了整个事情：IDs

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

<强>更新
JSfiddle webkit opacity fade

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，你将获得非常快速的原生淡出效果。

更新：对不起，我没有彻底阅读过quitstion title。

Answer 4

element.style未定义，因为您没有引用正确的对象。使用element[0]进行函数调用：

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

Fiddle

<小时/> 旁注：使用console.log（）和某种类型的开发者控制台（如Chrome中包含的那种）可以为调试工作带来奇迹。

Answer 5

你应该通过CSS3真正做到这一点，因为所有现代浏览器都支持它，对于旧版浏览器，只需使用show / hide。通过添加“fadeOut”类或通过JavaScript删除它来完成此操作。 CSS3（过渡）处理其他所有内容，包括隐藏和显示旧浏览器。

请记住：在使用JavaScript之前，尽可能在CSS中执行操作。它不仅更清洁，更易于维护，而且CSS3动画渲染更平滑，因为它经常使GPU（视频卡）而不仅仅是CPU硬化。这在移动设备上尤其重要，但它是在任何设备中执行此操作的标准，现代方式。

有关更多详细信息，请参阅此Opera文章： http://dev.opera.com/articles/view/css3-show-and-hide/

Answer 6

我会指出你正确的方向，并将剩下的编码留给你。

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

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

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

同样有几点指出，当任何以s结尾的函数获取东西时，你可以100％确定它为你提供了一个包含元素的数组，因此你必须引用你想要的元素。。在你的情况下是element[0]。

希望我能进一步帮助你！祝你好运！

Answer 7

我修改了@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 );
    }
}

如何使用：

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

JSfiddle fadeIn / fadeOut example

没有Jquery和CSS3，Javascript淡出淡出

7 个答案: