mit javascript DIV Container proportional skalieren

[codiag]

hallo

ich würde gerne wissen wie man mit javascript (evtl. JQuery) ein DIV Container proportional vergrössert während man mit der maus drüber fährt.
die Vergrößerung mit dem mouseover Effekt habe ich zwar hingekriegt nur vergrössert es sich nur nach recht und nicht auf beiden Seiten gleichzeitig.

Kann mir hierbei jemand helfen?

 

[chris027]

mit jquery, ein div von 300 auf 600px

$("#div_id").animate({width:'600px', margin-left:'-150px'})

 

[mercsen]

oder um beide seiten gleichzeotig um eine bestimmte größe skalieren:
erst die breite / höhe speichern und beide werte animieren lassen mit jquery.

var objekt, width, height;

objekt = $('#div');
width = objekt.width(); height = objekt.height();
objekt.animate({ width: width * 3, height: height * 3 }, 'slow');

wenn nicht möchtest das sich die mitte verschiebt musst du, wie chris schon sagte, auch die margin werte entsprechend animieren.

 

[Daaron]

CSS3 ist irgendwie etwas kürzer...

#deindiv
{
width: 300px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

#deindiv:hover
{
width:600px;
margin-left: -150px;
}

 

[Laci69]

Internet Explorer does not yet support the transition property.

http://www.w3schools.com/css3/css3_transitions.asp

 

[codiag]

Danke Daaron, das ist schon fast das was ich wollte, und wie kann ich jetzt noch die höhe oben und unten vergrössern ?

 

[Daaron]

Internet Explorer does not yet support the transition property.

Kein Mitleid für die Mehrheit!

Ne, ganz ehrlich: Wenn wir Webentwickler weiter auf den IE warten, dann können wir in 20 Jahren noch kein vollständiges CSS3 verwenden und binden unsere Video- und Audioclips weiter als Flash ein.

Danke Daaron, das ist schon fast das was ich wollte, und wie kann ich jetzt noch die höhe oben und unten vergrössern ?

Gib dem Div ne Höhe, gib dem div:hover ne andere Höhe... und eben ne passende Margin, falls es sich dabei noch zentrieren soll.