Layer langsam öffnen lassen

  • Hallo Leute :)


    Folgendes:
    Ich habe hier eine schmale Box mit einer "Überschrift" und einem Pfeil an der linken Seite (in Form eines Bildes). Wenn man auf den Pfeil klickt, öffnet sich diese Box nach unten und zusätzlich kommt ein Text zum Vorschein (unter die Überschrift), sie klappt sozusagen auf. Das funktioniert auch ganz wunderbar, nur hätte ich gerne, dass sich diese Box langsam nach unten öffnet. Ich habe zwar einige Funktionen im Web gefunden, bin jedoch irgendwie nicht klargekommen... :confused:
    Hier mal der nackte Code (ohne irgendwelche Verschönerungen):



    Ich wäre sehr dankbar über hilfreiche Antworten :D


    Liebe Grüße

  • Hallo MrMurphy,


    erstmal vielen Dank für die schnelle Antwort! :razz:


    Der Doctype:

    HTML
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Ob CSS oder JavaScript ist mir im Prinzip egal, hauptsache es funktioniert :)


    Das ganze sollte auf jeden Fall mit Firefox, Chroome funktionieren, möglicherweiße auch mit IE (ab Version 8/9 oder höher), Opera oder Safari (weiß nicht, inwieweit das geht, oder nötig ist), aber das ist nicht soo wichtig.


    Hoffe, es ist im Rahmen des Machbaren :)

  • Hier mal ein Beispiel mit opacity.


    Würde aber empfehlen für sowas auf Frameworks zurückzugreifen.
    https://api.jquery.com/slideDown/



    Ansonsten kannst du es selbst zum "langsam öffnen" umbauen indem du eine andere CSS-Eigenschaft änderst (Höhe z.B.).