在给定的时间之后，让div很好地消失-Makeadivfadeawaynicelyafteragivenamountoftime

12  

Not sure why you'd be so against using something like jQuery, which would make accomplishing this effect all but trivial, but essentially, you need to wrap a series of changes to the -moz-opacity, opacity, and filter:alpha CSS rules in a setTimeout().

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

Or, use jQuery, and wrap a fadeOut() call in setTimeout. Your choice.

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

4  

Here's some Javascript that does it. I found it on a Javascript tutorial web site somewhere (which I was unable to find again) and modified it.

这里有一些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);
}

The following html shows how it works:

以下html显示了它的工作原理:

    

    

        
This will fade when you click it
    

2  

These days, I would always use a library for that -- the progress they've made has been phenomenal, and the cross-browser functionality alone is worth it. So this answer is a non-answer. I'd just like to point out that jQuery is all of 15kB.

这些天,我总是会使用一个库 - 他们所取得的进步是惊人的,单独的跨浏览器功能是值得的。所以这个答案是没有答案的。我只想指出jQuery是15kB。

0  

Use setTimeout with the initial time to trigger the fade routine and then use setTimeout with low timer to step through the opacity level of the image until it's gone.

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

However, jQuery can get down to about 15k and is a one-time download for the client so I wouldn't call it huge.

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

0  

Try the YUI (Yahoo User Interface) Animation library: http://developer.yahoo.com/yui/animation/

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

Don't reinvent the wheel. Libraries are our friends. :-)

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

-2  

I know you're down on libraries, but I'd recommend taking a look at moo.fx: http://moofx.mad4milk.net/ - I think it's like 3k.

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

jQuery is pretty damn small too.

jQuery也非常小。