在一段时间后,让一个div很好地消失

时间:2008-09-23 21:55:32

标签: javascript css html fade

在给定时间后(不使用某些可用的JavaScript库),<div>逐渐消失的最佳方法是什么。

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

6 个答案:

答案 0 :(得分:12)

不确定为什么你会如此反对使用像jQuery这样的东西,这将使得完成这个效果几乎无关紧要,但实际上,你需要对-moz-opacity,opacity和filter进行一系列更改: setTimeout()中的alpha CSS规则。

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

答案 1 :(得分: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>

答案 2 :(得分:2)

现在,我总是会使用一个库 - 他们所取得的进展非常出色,而且单独使用跨浏览器功能是值得的。所以这个答案是无答案的。我只想指出jQuery是15kB。

答案 3 :(得分:0)

使用setTimeout和初始时间来触发淡入淡出例程,然后使用低时间的setTimeout来逐步调整图像的不透明度级别,直到它消失为止。

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

答案 4 :(得分:0)

尝试YUI(Yahoo用户界面)动画库:http://developer.yahoo.com/yui/animation/

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

答案 5 :(得分:-2)

我知道你对图书馆有所了解,但我建议你看看moo.fx:http://moofx.mad4milk.net/ - 我认为这就像是3k。

jQuery也非常小。