6

<div>在给定时间后淡出效果的最佳方法是什么（不使用一些可用的 JavaScript 库）。

我正在寻找一种非常轻量级的解决方案，不需要将庞大的 JavaScript 库发送到浏览器。

4

6 回答 6

12

不知道为什么你会如此反对使用像 jQuery 这样的东西，这会使完成这个效果几乎是微不足道的，但本质上，你需要对 -moz-opacity、opacity 和 filter:alpha CSS 规则进行一系列更改在 setTimeout() 中。

或者，使用 jQuery，并在 setTimeout 中包装一个 fadeOut() 调用。你的选择。

于 2008-09-23T21:58:38.240 回答
4

这是一些可以做到这一点的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>
于 2008-09-23T22:23:00.770 回答
2

这些天来，我总是会为此使用一个库——他们取得的进步是惊人的，而且单是跨浏览器的功能就值得了。所以这个答案是非答案。我只想指出，jQuery 全部为 15kB。

于 2008-09-23T21:58:42.590 回答
0

使用带有初始时间的 setTimeout 来触发淡入淡出例程，然后使用带有低计时器的 setTimeout 来逐步检查图像的不透明度级别，直到它消失。

然而，jQuery 可以降低到大约 15k，并且是客户端的一次性下载，所以我不会称它为巨大的。

于 2008-09-23T22:00:27.407 回答
0

试试 YUI（雅虎用户界面）动画库：http: //developer.yahoo.com/yui/animation/

不要重新发明轮子。图书馆是我们的朋友。:-)

于 2008-09-24T00:12:41.863 回答
-2

我知道你不喜欢图书馆，但我建议你看看 moo.fx：http://moofx.mad4milk.net/ - 我认为它就像 3k。

jQuery 也非常小。

于 2008-09-23T21:59:34.117 回答