kostenloser Webspace werbefrei: lima-city

Veränderungen an der automatischen Höhe eines divs animieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   c*****s

   13:22, 14.10.2013

   Hallo,
   
   ich habe eine kleines Problem:
   Ich habe ein div, das je nach Höhe des Inhalts seine Höhe anpasst. Wie schaffe ich es nun, diesen Übergang, also die Veränderung der Höhe, mit beispielsweise jQuery zu animieren? Denn momentan sieht der Übergang ziemlich ruckartig und unschön aus. Ich weiß zwar, wie man mit jQuery-Animationen umgeht, aber mir ist bislang dazu kein Lösungsansatz eingefallen.
   
   Danke schonmal im Voraus!

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. g****e

   13:40, 14.10.2013

   CSS3 Transition:
   

   #myDiv {
   transition: height 1s;
   -webkit-transition: height 1s;
   height: 100px;
   }

   
   Und dann mit Javascript:
   

   document.getElementById('myDiv').style.height="200px";

   
   Damit hast du eine 1 Sek animation getätigt. http://www.w3schools.com/css3/css3_transitions.asp
   Nur im IE9 oder früher geht das nicht. Wer regelmäßig Updated hat bei Window7 den IE10 installiert.
   
   Liebe Grüße
4. Autor dieses Themas

   c*****s

   13:50, 14.10.2013

   Das funktioniert aber leider nur, wenn ich die Höhe manuell per javaScript verändere. Aber die Höhe des divs passt sich ja automatisch (height:auto;) an den Inhalt an. Und da liegt ja mein Problem

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?