Box nach X Sekunden verschwinden lassen.

[portseven]

Tag,

gibt es in Javascript/Jquery eine Funktion, dass eine Box erscheint, die dann nach z.b 5 Sekunden wieder langsam verschwindet? Falls sowas geben/gehen sollte, hat jemand eventuell nen Link oder kann hier direkt ne Funktion reinschreiben falls es euch jetzt keine Umstände macht.

mfg

[J o]

Hey,

gibt es in Javascript/Jquery eine Funktion, dass eine Box erscheint, die dann nach z.b 5 Sekunden wieder langsam verschwindet? Falls sowas geben/gehen sollte, hat jemand eventuell nen Link oder kann hier direkt ne Funktion reinschreiben falls es euch jetzt keine Umstände macht.

Klar geht das. Etwas JQuery wie:

$('#box').delay(5000).fadeOut(500);

sollte zielführend sein. Mit reinem Javascript gehts natürlich auch (Ich würde es durch eine Klasse realisieren):

function fadeOut() {
    var box = document.getElementById("box");
    box.classList.add("fadeout");
}

mystyle sollte dann etwas enthalten wie:

#box {
	transition: opacity .5s;
}

.fadfeOut{
	opacity: 0;
}

Gruß
Jo

[Henry]

Hallo J,

es geht auch ohne JS und erst recht ohne Jquery, mit CSS Animation.

div {
padding:5%;
    margin:5%;
    width:200px;
    height:200px;
    background-color: #000;
    animation-name: houdini;
    animation-duration: 7s;
    animation-fill-mode: forwards;
}


@keyframes houdini{
    from {background-color: #000;}
    to {background-color: transparent;}
}

Als komplettes Beispiel, zum Testen, hier. (dort auf RUN klicken)

Gruss
Henry

[J o]

Hey,

es geht auch ohne JS und erst recht ohne Jquery, mit CSS Animation.

Ich weiß, die frage war aber nach JS/JQuery.

div {
padding:5%;
    margin:5%;
    width:200px;
    height:200px;
    background-color: #000;
    animation-name: houdini;
    animation-duration: 7s;
    animation-fill-mode: forwards;
}


@keyframes houdini{
    from {background-color: #000;}
    to {background-color: transparent;}
}

Zwei kleine Anmerkungen hätte ich da nur. Erstens fehlt dann ein animation-delay: 5s;. Und Zweitens, was noch viel wichtiger ist, darf nicht die Hintergrundfarbe verändert werden sondern die Opacity, plus, was bei mir noch fehlt ein display: none; am Ende der Animation oder Transition.

Wobei eine Transition immer vor einer Animation vorzuziehen ist, wie des öfteren hier im Forum schon erwähnt wurde.

Gruß
Jo

[Henry]

Hallo J,

Ich weiß, die frage war aber nach JS/JQuery.

Stimmt zwar, aber wenn jemand nach einer Axt fragt um ein Brot zu zerteilen, gebe ich ihm trotzdem lieber ein Brotmesser. 😉

Zwei kleine Anmerkungen hätte ich da nur. Erstens fehlt dann ein animation-delay: 5s;.

Warum? Standard/Default ist 0s. Wäre mir neu, dass es Pflicht ist trotzdem zu deklarieren.

Und Zweitens, was noch viel wichtiger ist, darf nicht die Hintergrundfarbe verändert werden sondern die Opacity, plus, was bei mir noch fehlt ein display: none; am Ende der Animation oder Transition.

display:none wäre schlecht, weil sich die Struktur der Seite ändern würde. Und warum nicht die Hintergrundfarbe? Ist außerdem sowieso ja nur ein Beispiel, das nach eigenem Bedürfnis angepasst werden sollte.

Wobei eine Transition immer vor einer Animation vorzuziehen ist, wie des öfteren hier im Forum schon erwähnt wurde.

Hm... dann wäre ich mal auf ein Beispiel von dir gespannt.

@admins
Ich hatte mir eigentlich vorgenommen in den externen Beispielen immer einenn Verweis zu der Frage hier einzupflegen, vergesse es aber immer wieder. Könnt Ihr den Link ändern? Ansonsten hier nochmal als Alternative.

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Erstens fehlt dann ein animation-delay: 5s;. Warum?

Wegen „die dann nach z.b 5 Sekunden wieder langsam verschwindet“.

Wegen „dass eine Box erscheint“ wäre aber hier transition das Mittel der Wahl.

Wobei eine Transition immer vor einer Animation vorzuziehen ist, wie des öfteren hier im Forum schon erwähnt wurde.

?? Nein, das kann man so nicht sagen. Beides sind unterschiedliche Dinge für unterschiedliche Zwecke.

Transition: ƒür sanften Übergang zwischen zwei Zuständen. Hier zwischen sichtbar und unsichtbar. Startet bei Änderung des Werts der betreffenden CSS-Eigenschaft(en), bspw. durch Änderung am DOM.

Animation: Startet automatisch, kann wiederholt ablaufen.

was bei mir noch fehlt ein display: none; am Ende der Animation oder Transition. display:none wäre schlecht, weil sich die Struktur der Seite ändern würde.

?? Struktur? Du meinst das Layout? (Falls das verschwindende Element nicht absolut positioniert ist?)

Dann halt visibility: hidden. Das wäre nach Ablauf der Transition per JavaScript zu setzen. Das sollte gemacht werden, weil ansonsten das Element mit opcity: 0 zwar visuell versteckt wäre, aber immer noch im accessibility tree vorhanden wäre.

LLAP 🖖

[Henry]

Hallo Gunnar,

Wegen „die dann nach z.b 5 Sekunden wieder langsam verschwindet“.

Ach so, soll dann erst beginnen, ok.

Wegen „dass eine Box erscheint“ wäre aber hier transition das Mittel der Wahl.

Warum?

?? Nein, das kann man so nicht sagen. Beides sind unterschiedliche Dinge für unterschiedliche Zwecke.

Animation: Startet automatisch, kann wiederholt ablaufen.

war wohl beides an @J o gerichtet.

?? Struktur? Du meinst das Layout? (Falls das verschwindende Element nicht absolut positioniert ist?)

genau

Dann halt visibility: hidden. Das wäre nach Ablauf der Transition per JavaScript zu setzen. Das sollte gemacht werden, weil ansonsten das Element mit opcity: 0 zwar visuell versteckt wäre, aber immer noch im `accessibility tree* vorhanden wäre.

visibility ja, nur warum JS?

Hab's mal angepasst.

div {
padding:5%;
    margin:5%;
    width:200px;
    height:200px;
    background-color: #fff;
    animation-name: houdini;
    animation-delay: 5s;
    animation-duration: 8s;
    animation-fill-mode: forwards;
}


@keyframes houdini{
    0{visibility:visible;}
    30%{background-color: #000;}
    100% {visibility:hidden;}
}

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

visibility ja, nur warum JS?

Weil das erst nach Ablauf der Transition wirken darf. Animierbar (d.h. bei Transition bzw. Animation stufenlos feinstufig änderbar sind nur Eigenschaften mit numerischen Werten. visibility ist nicht animierbar …

@keyframes houdini{
    0{visibility:visible;}
    30%{background-color: #000;}
    100% {visibility:hidden;}
}

… so wird das nichts.

Was man wohl auch machen kann: Man setzt beim Start der Transition aria-hidden="true".

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Weil das erst nach Ablauf der Transition wirken darf. Animierbar (d.h. bei Transition bzw. Animation stufenlos feinstufig änderbar sind nur Eigenschaften mit numerischen Werten. visibility ist nicht animierbar …

aber opacity.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

visibility ist nicht animierbar …

aber opacity.

Gehe zurück in die Badstraße (ganz unten).

LLAP 🖖

[Henry]

Hallo Gunnar,

Weil das erst nach Ablauf der Transition wirken darf. Animierbar (d.h. bei Transition bzw. Animation stufenlos feinstufig änderbar sind nur Eigenschaften mit numerischen Werten. visibility ist nicht animierbar …

ähm… versteh ich nicht. Bei 100% setzt doch visibility:hidden ein, also wie gewollt. Meinst du was anderes?

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

visibility ist nicht animierbar …

ähm… versteh ich nicht. Bei 100% setzt doch visibility:hidden ein, also wie gewollt. Meinst du was anderes?

Nein, opacity und visibility sind verschiedene Dinge. opacity ist animierbar; visibility nicht.

LLAP 🖖

[Henry]

Hallo Gunnar,

ähm… versteh ich nicht. Bei 100% setzt doch visibility:hidden ein, also wie gewollt. Meinst du was anderes?

Nein, opacity und visibility sind verschiedene Dinge. opacity ist animierbar; visibility nicht.

Ich kapiere es nicht. Visibility muss auch nicht animierbar sein. Es muss nur, gemäß deiner Aussage, am Ende vorhanden sein. Und das ist es doch, oder etwa nicht?

Also ich lasse nach 5 Sekunden die Box erscheinen, diese blendet innerhalb 8sek. wieder aus, was bleibt ist der unsichtbare(bg=transparent), doch selbstg dieser schaltet komplett dann die visibility auf hidden und nun ist nichts mehr da. Alles wie gewollt, oder nicht?

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Ich kapiere es nicht. Visibility muss auch nicht animierbar sein. Es muss nur, gemäß deiner Aussage, am Ende vorhanden sein. Und das ist es doch, oder etwa nicht?

Ich denke, nicht. (Beachte das Komma! 😉)

Ich meine, opocity geht runter auf 0, aber da visibility nicht animiert wird, bleibt das auf visible stehen, das Element ist zwar unsichtbar, aber weiterhin im accessibility tree.

Ich bin gerade auf Klassenfahrt; da treffe ich bestimmt jemanden, der das genau weiß …

LLAP 🖖

[Henry]

Hallo Gunnar,

Ich bin gerade auf Klassenfahrt; da treffe ich bestimmt jemanden, der das genau weiß …

Na dann, viel Spaß dort. Aber fragen brauchst du niemanden mehr. Ich habe jetzt noch einen Checkbutton eingebaut um den LIVE-Status (visibility) anzuzeigen und es ist so wie ich sagte, erst visible und am Ende hidden. Somit kein JS notwendig.

Aber schau selbst. (Die Zeiten habe ich nur gekürzt, damit weniger Wartezeit beim testen).

Gruss
Henry

[marctrix]

Hej Gunnar,

Ich bin gerade auf Klassenfahrt…

F***k - schon wieder verpasst. Grrrr...

Marc

[marctrix]

Hej Henry,

@keyframes houdini{
    0{visibility:visible;}
    30%{background-color: #000;}
    100% {visibility:hidden;}
}

WOW - wusste gar nicht, dass das geht! Danke!

Marc

[Gunnar Bittersmann]

@@marctrix

@keyframes houdini{
    0{visibility:visible;}
    30%{background-color: #000;}
    100% {visibility:hidden;}
}

WOW - wusste gar nicht, dass das geht! Danke!

Zum richtigen Gebrauch des Konjunktivs: Wüsste nicht, dass das ginge! Bitte! 😜

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

@keyframes houdini{
    0{visibility:visible;}
    30%{background-color: #000;}
    100% {visibility:hidden;}
}

WOW - wusste gar nicht, dass das geht! Danke!

Zum richtigen Gebrauch des Konjunktivs: Wüsste nicht, dass das ginge! Bitte! 😜

Bei mir im FF geht das: aber wie gesagt halte ich den praktischen Nutzen für gering. Ich sehe keine Notwendigkeit, das aus dem Accessibility tree zu nehmen. Auch Sehenden sollte man die Box nicht wegnehmen, ohne dass die das selber veranlassen.

So wie vom OP gewünscht, ist das jedenfalls schon das Konzept nicht zugänglich — ganz unabhängig von der technischen Umsetzung.

Grundsätzlich haben Blinde keine Platzprobleme. Was gelesen ist, ist gelesen und stört nicht mehr. Schön wenn man zurückkann zu einer gelesenen Stelle (z.B. nach einer Unterbrechung), um zu wissen, was man zuletzt gelesen hat. Also erreichbar lassen!

Empfehle ich übrigens auch für Menüs, Navigationen, Akkordeons o.ä. (nicht aber für alle Unterpunkte bei sehr langen Aufzählungen. Die Unterpunkte dürfen gerne auf display: none gesetzt werden, um die Anzahl von benötigten Tabulator-Klicks auf ein erträgliches Maß zu reduzieren.

Aber das geht jetzt ein bisschen weg vom Thema…

Marc

[Henry]

Hallo marctrix,

Bei mir im FF geht das: aber wie gesagt halte ich den praktischen Nutzen für gering. Ich sehe keine Notwendigkeit, das aus dem Accessibility tree zu nehmen. Auch Sehenden sollte man die Box nicht wegnehmen, ohne dass die das selber veranlassen.

Na ja bin hier eigentlich nur den Empfehlungen gefolgt und habe es dementsprechend angepasst:

Dann halt visibility: hidden. Das wäre nach Ablauf der Transition per JavaScript zu setzen. Das sollte gemacht werden, weil ansonsten das Element mit opcity: 0 zwar visuell versteckt wäre, aber immer noch im accessibility tree vorhanden wäre.

Denn, die erste Version versteckt nichts wirklich.

So wie vom OP gewünscht, ist das jedenfalls schon das Konzept nicht zugänglich — ganz unabhängig von der technischen Umsetzung.

Kommt drauf an wofür, der Primärnutzen so eines Ablaufs dürften Werbebanner sein und da wäre ich froh, wenn ich die gar nicht sehen müsste.

Gruss
Henry

[MudGuard]

Hi,

Kommt drauf an wofür, der Primärnutzen so eines Ablaufs dürften Werbebanner sein und da wäre ich froh, wenn ich die gar nicht sehen müsste.

was wichtiges kann ja gar nicht drin stehen - das bekäme man ja gar nicht mit, wenn man z.B. so wie ich erstmal viele Links in Hintergrund-Tabs lädt, und dann erst die Tabs der Reihe nach besichtigt - da wäre die wichtige Info ja schon längst wieder weg.

Oder man ist grad mitten im Lesen der Info, und das Ding verschwindet.

Oder …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@marctrix

Ich sehe keine Notwendigkeit, das aus dem Accessibility tree zu nehmen.

Das dürfte aber sehende Benutzer von Screenreadern verwirren, wenn etwas angesagt wird, was überhaupt nicht auf dem Bildschirm ist.

Auch Sehenden sollte man die Box nicht wegnehmen, ohne dass die das selber veranlassen.

Das ist eine andere Diskussion.

LLAP 🖖

[marctrix]

Hej Gunnar,

Ich sehe keine Notwendigkeit, das aus dem Accessibility tree zu nehmen.

Das dürfte aber sehende Benutzer von Screenreadern verwirren, wenn etwas angesagt wird, was überhaupt nicht auf dem Bildschirm ist.

Auch Sehenden sollte man die Box nicht wegnehmen, ohne dass die das selber veranlassen.

Das ist eine andere Diskussion.

Für mich nicht. Deswegen stehen die beiden Sätze in meinem Post auch in demselben Absatz.

Eine endgültige Empfehlung kann man aber eh nur abgeben, wenn man die echten Inhalte kennt.

Marc

[marctrix]

Hej Gunnar,

Dann halt visibility: hidden. Das wäre nach Ablauf der Transition per JavaScript zu setzen. Das sollte gemacht werden, weil ansonsten das Element mit opcity: 0 zwar visuell versteckt wäre, aber immer noch im accessibility tree vorhanden wäre.

Genau darauf würde ich bestehen! - Es zugänglich zu erhalten!

Marc

[Matthias Apsel]

Hallo Henry,

@admins
Ich hatte mir eigentlich vorgenommen in den externen Beispielen immer einenn Verweis zu der Frage hier einzupflegen, vergesse es aber immer wieder. Könnt Ihr den Link ändern? Ansonsten hier nochmal als Alternative.

Welchen Link?

Bis demnächst
Matthias

[Henry]

Hallo Matthias,

Welchen Link?

Den hier drin. Aber hat sich ja eh wieder geändert, daher egal. Aber grundsätzlich dann wohl möglich, gut zu wissen, danke.

Gruss
Henry