Layer langsam öffnen lassen

elmaex

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...
Hier mal der nackte Code (ohne irgendwelche Verschönerungen):

HTML

<html>
    <head>    
        <script type="text/javascript">
                function showHideLayer(id){
                    e = document.getElementById(id);

                    if(e.style.display=="block"){
                        e.style.display = "none";

                    } else {
                        e.style.display = "block";

                    }
                }

            </script>
    </head>
    <body>
        <div id="box" style="padding:6px 90px;margin-bottom:8px;background-color:green;">                        
            <span id="header_style">...Ueberschrift...</span>    
            <a href="alternativerLink" onclick="showHideLayer('meinLayer1');return(false)"><span id="mehr_anzeigen1" onClick="javascript:changeText1()" style="position:absolute;left:19px;top:9px;" title="mehr/weniger anzeigen..."><img src="pfeil_unten_klein.png" height="25" onmouseover="this.src='pfeil_unten_groß.png'" onmouseout="this.src='pfeil_unten_klein.png'"/></span></a>
            <div id="meinLayer1" style="display:none;"><br />
            <span id="text" style="font-size:15px;font-weight:bold;">TextTextTextTextTextTextTextTextTextTextTextTextTextText<br /><br /></span>
            </div>
        </div>    
    </body>
</html>

Alles anzeigen

Ich wäre sehr dankbar über hilfreiche Antworten

Liebe Grüße

MrMurphy

Hallo,

ein paar zusätzliche Informationen wären hilfreich:

Welcher Doctype?

Lösung mit CSS oder JavaScript?

Mit welchen Browsern (speziell welche Versionen des IE) soll sie Lösung funktionieren?

Gruss

MrMurphy

elmaex

Hallo MrMurphy,

erstmal vielen Dank für die schnelle Antwort!

Der Doctype:

HTML

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

elmaex

Keiner, der helfen kann???

Grevas

Hier mal ein Beispiel mit opacity.

HTML

<html>
    <head>    
        <script type="text/javascript">
                function showHideLayer(id){
                    e = document.getElementById(id);

                    if(e.style.display=="block"){
                        e.style.display = "none";

                    } else {
                        e.style.display = "block";
                        fadeIn(e);

                    }
                }

                function fadeIn(e, time) {
                  e.style.opacity = 0;
                  var op = 0;

                  var animate = function() {
                    if(op < 1) {
                      e.style.opacity = op += 0.1;
                      setTimeout(animate, time || 200); // time in miliseconds for each animation step, defaults to 200
                    }
                  }
                  animate();
                }
            </script>
    </head>
    <body>
        <div id="box" style="padding:6px 90px;margin-bottom:8px;background-color:green;">                        
            <span id="header_style">...Ueberschrift...</span>    
            <a href="alternativerLink" onclick="showHideLayer('meinLayer1');return(false)"><span id="mehr_anzeigen1" onClick="javascript:changeText1()" style="position:absolute;left:19px;top:9px;" title="mehr/weniger anzeigen..."><img src="pfeil_unten_klein.png" height="25" onmouseover="this.src='pfeil_unten_groß.png'" onmouseout="this.src='pfeil_unten_klein.png'"/></span></a>
            <div id="meinLayer1" style="display:none;"><br />
            <span id="text" style="font-size:15px;font-weight:bold;">TextTextTextTextTextTextTextTextTextTextTextTextTextText<br /><br /></span>
            </div>
        </div>    
    </body>
</html>

Alles anzeigen

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

Tags