没有 Jquery 和 CSS3 的 Javascript 淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13733912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript fade in fade out without Jquery and CSS3
提问by Ravi
I am really squeezing my head to make the simple fade in and fade out of the background image work only with javascript without JQuery and CSS3. I know how easy is to call a fadeIn() and fadeOut() in Jquery. Unfortunately in my project I am working, they don't support Jquery. I want to support the animation from IE6 for your info.
我真的很想使简单的淡入和淡出背景图像仅适用于没有 JQuery 和 CSS3 的 javascript。我知道在Jquery 中调用fadeIn() 和fadeOut() 是多么容易。不幸的是，在我正在工作的项目中，他们不支持 Jquery。我想支持来自 IE6 的动画以供您参考。
On click of the links the corresponding background of the div to be faded in and out from the previously existing background. I am trying to make it work based on setinterval but could not do it.
单击链接时，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);
}
?
?
采纳答案by EricG
getElementByIdgivies you one element (or null), getElementsByClassNamegives an array.
getElementById给你一个元素（或空），getElementsByClassName给一个数组。
function handleClick(evt){
var element = document.getElementById(evt.target.id);
fade(element);
}
You seem to aim for usage of ID's, so this should answer your needs. I updated the whole thing: IDs
您似乎旨在使用 ID，因此这应该可以满足您的需求。我更新了整个事情：ID
However, you should realize that this method of fading is much more costly than using GPU accelerated transitions.
但是，您应该意识到这种淡入淡出的方法比使用 GPU 加速转换的成本要高得多。
回答by Raptor007
Here are my full implementations of fadeIn and fadeOut for cross-browser support (including IE6) which does not require jQuery or any other 3rd-party JS library:
以下是我为跨浏览器支持（包括 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";
}
}
As others have said, you need to fix your handleClick to properly select a single element, then pass that element to the fade function (which I named fadeOut for clarity). The default time for a jQuery fade is 400ms, so if you want to mimic that, your call might look like this:
正如其他人所说，您需要修复您的 handleClick 以正确选择单个元素，然后将该元素传递给淡入淡出函数（为了清晰起见，我将其命名为fadeOut）。jQuery 淡入淡出的默认时间是 400 毫秒，因此如果您想模仿它，您的调用可能如下所示：
function handleClick( evt )
{
fadeOut( document.getElementById(evt.target.id), 400 );
}
回答by bonbonez
If you do not care about IE7 - IE9, you can use very useful CSS3 transitions, something like this:
如果您不关心 IE7 - IE9，您可以使用非常有用的 CSS3 过渡，如下所示：
.element {
-webkit-transition: opacity 0.3s ease;
}
.element[faded=true] {
opacity: 0;
}
You will get very fast, native fade out effect without jQuery.
您将获得非常快的原生淡出效果，无需 jQuery。
UPDATE: Sorry, i hadn't read quiestion title thoroughly.
更新：对不起，我没有彻底阅读问题标题。
回答by HellaMad
element.styleis undefined because you're not referencing the correct object. Use element[0]for your function call:
element.style未定义，因为您没有引用正确的对象。使用element[0]你的函数调用：
function handleClick(evt){
var element = document.getElementsByClassName(evt.target.id);
fade(element[0]);
}
Side note: Using console.log() and some type of developer console (like the one included in Chrome) can work wonders for debugging.旁注：使用 console.log() 和某种类型的开发人员控制台（如 Chrome 中包含的控制台）可以为调试创造奇迹。
回答by Mauvis Ledford
You should really do this via CSS3 since all modern browsers support it, and for older browsers fallback to just using show/hide. Do this by adding a "fadeOut" class or removing it via JavaScript. CSS3 (transitions) handle everything else, including hiding and showing it for older browsers.
你真的应该通过 CSS3 来做到这一点，因为所有现代浏览器都支持它，而对于旧浏览器，则只能使用显示/隐藏。通过添加“fadeOut”类或通过 JavaScript 删除它来实现。CSS3（过渡）处理其他一切，包括为旧浏览器隐藏和显示它。
Remember: As much as possible, do things in CSS before doing them in JavaScript. Not only is it cleaner and easier to maintain but CSS3 animations render smoother as it often hardnesses the GPU (video card) and not just the CPU. This is especially important on mobile devices but is the standard, modern way for doing it in any device.
请记住：在使用 JavaScript 之前，尽可能先使用 CSS 进行操作。它不仅更干净、更易于维护，而且 CSS3 动画渲染更流畅，因为它经常使 GPU（视频卡）而不仅仅是 CPU 变硬。这在移动设备上尤其重要，但它是在任何设备上执行此操作的标准、现代方式。
See this Opera article for greater detail: http://dev.opera.com/articles/view/css3-show-and-hide/
有关更多详细信息，请参阅这篇 Opera 文章：http: //dev.opera.com/articles/view/css3-show-and-hide/
回答by Henrik Andersson
I'll point you off in the right direction and leave the rest of the coding to you.
我会为你指明正确的方向，剩下的编码就交给你了。
This is how the setInterval() function works. It takes a function to execute and then the milliseconds it should run for.
这就是 setInterval() 函数的工作原理。它需要一个函数来执行，然后是它应该运行的毫秒数。
setInterval(function() {
if(fade(element[0]))
clearInterval();
}, 50);
I made a JS fiddle for you hereIt's semicomplete but shows off how you should go about making your fadeout/fadein. This is tested in Chrome on a Mac. Not sure about FF nor IE unfortunately.
我在这里为您制作了一个 JS 小提琴它是半完整的，但展示了您应该如何制作淡出/淡入淡出。这是在 Mac 上的 Chrome 中测试的。不幸的是，不确定 FF 或 IE。
Also as several pointed out, when getting stuff by any function that ends with syou can be 100% sure that it gives you an array with elements and thus you have to refer to the element you want as such. In your case its element[0].
同样正如一些人指出的那样，当通过任何以s您结尾的函数获取内容时，可以 100% 确定它为您提供了一个包含元素的数组，因此您必须这样引用您想要的元素。在你的情况下，它的element[0].
Hope I help you further a little ways! :) Good luck!
希望我能帮到你更进一步的一些方法！：） 祝你好运！
