Machen Sie einen div fade away schön nach einer vorgegebenen Zeit

StackOverflow https://stackoverflow.com/questions/124166

  •  02-07-2019
  •  | 
  •  

Frage

Was ist der beste Weg, um einen <div> abklingen nach einer bestimmten Zeitspanne zu machen (ohne verfügbar einige der JavaScript-Bibliotheken verwendet wird).

Ich bin für eine sehr leichte Lösung keinen großen JavaScript-Bibliothek erfordert an den Browser gesendet werden.

War es hilfreich?

Lösung

Nicht sicher, warum Sie so gegen so etwas wie jQuery verwenden würden, was dieser Effekt alle, aber trivial würde erreichen, aber im Wesentlichen, müssen Sie eine Reihe von Änderungen an die -moz-Opazität wickeln, Opazität und Filter: alpha CSS-Regeln in einem setTimeout ().

Oder verwenden Sie jQuery, und wickeln Sie ein fadeOut () -Aufruf in SetTimeout. Ihre Wahl.

Andere Tipps

Hier ist ein Javascript, das es tut. Ich fand es auf eine Javascript-Tutorial Website irgendwo (ich war nicht in der Lage wieder zu finden) und modifizierte es. 

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);
}

Das folgende HTML zeigt, wie es funktioniert: 

<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>

In diesen Tagen, würde ich immer eine Bibliothek dafür verwenden - die Fortschritte, die sie gemacht haben, war phänomenal, und die Cross-Browser-Funktionalität allein ist es wert. Also diese Antwort ist eine Nicht-Antwort. Ich möchte nur darauf hinweisen, dass jQuery alle 15kB ist.

Verwenden SetTimeout mit der Anfangszeit der Fade-Routine auslösen und dann setTimeout verwenden, um mit niedrigen Timer durch die Undurchsichtigkeit Pegel des Bildes zu dem Schritt, bis es weg ist.

Allerdings jQuery auf etwa 15k runter und ist ein einmaliger Download für die Kunden so würde ich es nicht sehr groß nennen.

Versuchen Sie, die YUI (Yahoo User Interface) Animation, Bibliothek: http://developer.yahoo.com / yui / Animation /

Setzen Sie das Rad nicht neu erfinden. Bibliotheken sind unsere Freunde. : -)

Ich weiß, du bist unten auf Bibliotheken, aber ich würde empfehlen, einen Blick auf moo.fx unter: http: //moofx.mad4milk.net/ . - ich denke, es ist wie 3k ist

jQuery ist verdammt zu klein.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top