在给定的时间后，使div淡入淡出
时间：2020-03-06 14:37:49 来源:igfitidea点击:
在给定的时间(不使用某些可用的JavaScript库)后，使<div>消失的最佳方法是什么。
我正在寻找一种非常轻量级的解决方案，不需要将庞大的JavaScript库发送到浏览器。
解决方案
不知道为什么不反对使用jQuery之类的东西，这将使实现这种效果变得微不足道，但从本质上讲，我们需要对-moz-opacity，opacity和filter：alpha CSS规则进行一系列更改在setTimeout()中。
或者，使用jQuery，并在setTimeout中包装一个fadeOut()调用。你的选择。
这些天来，我总是会使用一个库-他们所取得的进步是惊人的，而且仅跨浏览器功能是值得的。因此，此答案为非答案。我只想指出jQuery的大小为15kB。
我知道我们不喜欢图书馆，但我建议我们看一下moo.fx：http://moofx.mad4milk.net/我认为它就像3k。
jQuery也非常小。
将setTimeout与初始时间一起使用可触发淡入淡出例程，然后将setTimeout与低计时器配合使用以逐步遍历图像的不透明度级别，直到消失为止。
但是，jQuery可以减少到约15,000，并且是客户端的一次性下载，因此我不会说它太大。
这是一些执行此操作的JavaScript。我在某个javascript教程网站上找到了它(我再也找不到了)，并对其进行了修改。
var TimeToFade = 200.0;
function fade(eid)
{
var element = document.getElementById(eid);
if(element == null) return;
if(element.FadeState == null)
{
if(element.style.opacity == null || element.style.opacity == ''
|| element.style.opacity == '1') {
element.FadeState = 2;
} else {
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1) {
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
} else {
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime()
+ ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks) {
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
element.style.display = "none";
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1) {
newOpVal = 1 - newOpVal;
}
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
以下html显示了它是如何工作的：
<html><head>
<script type="text/javascript" src="fade.js"></script>
</head><body>
<div id="fademe" onclick="fade( 'fademe' )">
<p>This will fade when you click it</p>
</div>
</body></html>
尝试使用YUI(雅虎用户界面)动画库：http://developer.yahoo.com/yui/animation/
不要重新发明轮子。图书馆是我们的朋友。 :-)
