18

我真的很努力使简单的淡入淡出背景图像仅适用于没有 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);
}

​</p>

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

4

8 回答 8

16

这是我对跨浏览器支持（包括 IE6）的淡入和淡出的完整实现，不需要 jQuery 或任何其他 3rd-party 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 以正确选择单个元素，然后将该元素传递给淡入淡出函数（为清楚起见，我将其命名为 fadeOut）。jQuery 淡入淡出的默认时间是 400 毫秒，所以如果你想模仿它，你的调用可能如下所示：

function handleClick( evt )
{
  fadeOut( document.getElementById(evt.target.id), 400 );
}
于 2013-12-12T01:03:01.983 回答
10

getElementById给你一个元素（或 null），getElementsByClassName给你一个数组。

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

}

您似乎旨在使用 ID，因此这应该可以满足您的需求。我更新了整个东西：ID

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

更新
JSfiddle webkit 不透明度淡化

于 2012-12-05T23:01:16.100 回答
7

如果您不关心 IE7 - IE9，您可以使用非常有用的 CSS3 过渡，如下所示：

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

没有 jQuery，您将获得非常快速的原生淡出效果。

更新：对不起，我没有彻底阅读问题标题。

于 2012-12-05T23:06:54.883 回答
3

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

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

小提琴


旁注：使用 console.log() 和某种类型的开发者控制台（如 Chrome 中包含的控制台）可以为调试创造奇迹。

于 2012-12-05T22:57:36.877 回答
2

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

记住：尽可能先在 CSS 中做事，然后在 JavaScript 中做。它不仅更清洁、更易于维护，而且 CSS3 动画渲染更流畅，因为它通常会增加 GPU（视频卡）的硬度，而不仅仅是 CPU。这在移动设备上尤为重要，但却是在任何设备上执行此操作的标准、现代方式。

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

于 2012-12-05T23:04:30.723 回答
1

我会为您指明正确的方向，并将其余的编码留给您。

这就是 setInterval() 函数的工作原理。它需要一个函数来执行，然后是它应该运行的毫秒数。

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

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

同样正如一些人指出的那样，当通过任何以s您结尾的函数获取内容时，可以 100% 确定它为您提供了一个包含元素的数组，因此您必须引用您想要的元素。在你的情况下，它的element[0].

希望我能帮助你进一步的小方法！：） 祝你好运！

于 2012-12-05T23:28:04.380 回答
1

对于根据情况切换淡入或淡出的单个功能，这是我的功能

function toggleFade(elem, speed ) {
    //Add Opacity Property if it doesnt exist
    if (!elem.style.opacity) elem.style.opacity = 1;
  
  if (elem.style.opacity <= 0) {
    var inInterval = setInterval(function() {
      elem.style.opacity = Number(elem.style.opacity)+0.02;
      if (elem.style.opacity >= 1)
        clearInterval(inInterval);
    }, speed/50 );
  }else{ // end if
    var outInterval = setInterval(function() {
        elem.style.opacity -= 0.02;
    if (elem.style.opacity <= 0)
        clearInterval(outInterval);
    }, speed/50 );
  }
}
于 2021-11-02T15:16:42.377 回答
0

我修改了@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 淡入/淡出示例

于 2021-03-21T07:32:37.567 回答