Javascript 淡入淡出效果使用javascript 没有jquery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5104053/
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
fade effect using javascript no jquery?
提问by HTweaks
jQuery derived from javascript have beautiful method of creating fade effect.
源自 javascript 的 jQuery 具有创建淡入淡出效果的漂亮方法。
But how can I achieve same heightusing my own custom javascript code?
但是如何使用我自己的自定义 javascript 代码实现相同的高度？
I wanted the most simple one.. which fades out to zero.
我想要最简单的..淡出为零。
回答by Clain Dsilva
Here is a pure implementation of fade in and fade out effect using JavaScript.
这是使用 JavaScript 的淡入淡出效果的纯实现。
- Make use of CSS Opacity property
- During fade out process, we reduce the opacity value from 0.9 to 0
- Similarly fade in process increase the 0.0 to 0.9
- For IE its 10 to 90
Use setTimeout() function to call the fade function recursively with delay and increase / decrease opacity value to achieve the fade effect
function fadeOut(id,val){ if(isNaN(val)){ val = 9;} document.getElementById(id).style.opacity='0.'+val; //For IE document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; if(val>0){ val–; setTimeout('fadeOut("'+id+'",'+val+')',90); }else{return;} } function fadeIn(id,val){ // ID of the element to fade, Fade value[min value is 0] if(isNaN(val)){ val = 0;} document.getElementById(id).style.opacity='0.'+val; //For IE document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; if(val<9){ val++; setTimeout('fadeIn("'+id+'",'+val+')',90); }else{return;} }
- 使用 CSS Opacity 属性
- 在淡出过程中，我们将不透明度值从 0.9 降低到 0
- 同样的淡入过程增加 0.0 到 0.9
- 对于 IE，它是 10 到 90
使用 setTimeout() 函数递归调用淡入淡出函数并延迟并增加/减少不透明度值以实现淡入淡出效果
function fadeOut(id,val){ if(isNaN(val)){ val = 9;} document.getElementById(id).style.opacity='0.'+val; //For IE document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; if(val>0){ val–; setTimeout('fadeOut("'+id+'",'+val+')',90); }else{return;} } function fadeIn(id,val){ // ID of the element to fade, Fade value[min value is 0] if(isNaN(val)){ val = 0;} document.getElementById(id).style.opacity='0.'+val; //For IE document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; if(val<9){ val++; setTimeout('fadeIn("'+id+'",'+val+')',90); }else{return;} }
You can refer to How To Cross Fade Anything With JavaScriptfor demo and detailed examples.
您可以参考如何使用 JavaScript 交叉淡化任何内容以获取演示和详细示例。
Cheers -Clain
干杯-克莱恩
回答by yent
Try this :
尝试这个 ：
function fade(what, duration) {
what.opct = 100;
what.ih = window.setInterval(function() {
what.opct--;
if(what.opct) {
what.MozOpacity = what.opct / 100;
what.KhtmlOpacity = what.opct / 100;
what.filter = "alpha(opacity=" + what.opct + ")";
what.opacity = what.opct / 100;
}else{
window.clearInterval(what.ih);
what.style.display = 'none';
}
}, 10 * duration);
}
Use it like :
像这样使用它：
fade(htmlobject, 2); // delay is in second
回答by Andrea
Creating animations is quite a delicate task. You have to take care of browser differences in handling CSS properties. Then you have to be sure you know how to work with timers, because they are usually not very accurate in Javascript. In short it will be easy to write a simple fading effect, but it will take a fair amount of work to make one that is comparable to jQuery.
创建动画是一项非常微妙的任务。您必须注意浏览器在处理 CSS 属性方面的差异。然后你必须确保你知道如何使用计时器，因为它们在 Javascript 中通常不是很准确。简而言之，编写一个简单的淡入淡出效果会很容易，但是要制作出与 jQuery 相当的效果需要大量的工作。
You can read this(well, you have to wait for it to be finished) to have a better idea of how jQuery is structured, and then try to rool your own.
您可以阅读本文（好吧，您必须等待它完成）以更好地了解 jQuery 的结构，然后尝试自己编写。
回答by Reporter
you can define a color with hexadcimal system or ordinary decimal system. An example that uses the hexadecimal system
您可以使用十六进制或普通十进制定义颜色。使用十六进制系统的示例
BODY {background-color:#FF00FF;}
and an example that uses the decimal system
和一个使用十进制系统的例子
BODY {background-color:rgb(51,0,102)}
The definition rgb(255,255,255) represents the color white, the code rgb(0,0,0) represents black.
定义 rgb(255,255,255) 表示白色，代码 rgb(0,0,0) 表示黑色。
So how you can made a fade effekt? Well, the easiest way is to use the way with decimal code:
那么如何制作淡入淡出效果呢？好吧，最简单的方法是使用十进制代码的方式：
<script type="text/javascript">
var red = 255;
var green = 255;
var blue = 255;
var interVal = window.setInterval("fadeEffect()", 1000);
function fadeEffect() {
if (red > 0 && green > 0 && blue > 0) red--;
if (red == 0 && green > 0 && blue > 0) green--;
if (red == 0 && green == 0 && blue > 0) blue--;
if (red == 0 && green == 0 && blue == 0) window.clearInterval(interVal);
//Creates the new code of color
colorAttr = "rgb("+red+","+green+","+blue+")";
//However or whereever you make the new color public
...
//Reset the first two colors
if (red == 0) red == 255;
if (green == 0) green = 255;
}
</script>
Hopefully it will answer your question or help you to come up with your own idea. If you want to use hexadecimal numbers, then you had to convert into hexa code before you had created the new argument.
希望它能回答您的问题或帮助您提出自己的想法。如果要使用十六进制数，则必须在创建新参数之前转换为十六进制代码。
回答by SI Web Design
Why not using CSS3 transitions?
为什么不使用 CSS3 过渡？
...
...
opacity: 100;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
transition: opacity .5s ease-out;
