portseven: Box nach X Sekunden verschwinden lassen.

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

akzeptierte Antworten

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

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

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

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

          1. @@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 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. 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

              1. @@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 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. 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

                  --
                  Rosen sind rot.
                  1. @@Matthias Apsel

                    visibility ist nicht animierbar …

                    aber opacity.

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

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                2. 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

                  1. @@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 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. 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

                      1. @@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 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. 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

                        2. Hej Gunnar,

                          Ich bin gerade auf Klassenfahrt

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

                          Marc

              2. Hej Henry,

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

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

                Marc

                1. @@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 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. 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

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

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

                    2. @@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 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. 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

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

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

            --
            Rosen sind rot.
            1. 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