Animation eines Elements Breite von 0 bis 100%, und es ist der wrapper wird nur so breit wie Sie sein müssen, ohne eine VORGEGEBENE Breite in CSS3 oder jQuery
http://jsfiddle.net/nicktheandroid/tVHYg/
Wenn die Maus .wrapper
, es ist Kind-element .contents
sollte animieren von 0px
zu seiner natürlichen Breite. Dann, wenn man die Maus entfernt .wrapper
es sollte animieren, wieder nach unten zu 0px
. Die .wrapper
element sollte nur so breit sein wie es sein muss (so dass .contents
zu wachsen), so .wrapper
sollte wachsen in der Breite und schrumpfen in der Breite als .contents
tut. Es sollte keine festgelegte Breite für .contents
. Ich bin mit CSS3, aber es erreicht werden könnte, in jQuery, das wäre fein.
Das problem:
Siehe JSfiddle
.wrapper
ist nicht nur so breit wie es sein muss.- wenn
.contents
wächst, wenn es schon fast in voller Breite, es springt in die nächste Zeile - Wenn die Maus aus der
.wrapper
,.contents
verschwindet, wenn es sollte animieren, nach unten zu0px
CSS:
.wrapper {
display: inline-block;
height: 20px;
width: auto;
padding:10px;
background:#DDD;
}
.contents {
display:inline-block;
width:0%;
white-space:nowrap;
overflow:hidden;
background:#c3c;
}
.wrapper:hover .contents {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
width:100%;
}
HTML:
<div class="wrapper">
<span>+</span>
<div class="contents">These are the contents of this div</div>
</div>
- #3 ist einfach: bewegen Sie den übergang Stile zur
.contents
.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke ich habe es.
CSS:
HTML:
Animieren zum
100%
bewirkt, dass es zu wickeln, da das Feld größer ist als die Breite (100% minus die+
und das Leerzeichen nach es).Stattdessen können Sie animieren, ein inneres element, dessen
100%
ist die Gesamtbreite des.contents
..wrapper
zu bekommen, größer und kleiner in der Breite als nötig, ich habe versucht, für ein bisschen, aber ich kann es nicht bekommen. Das war #1 oben in der Liste, ich vielleicht nicht erklären, dass man sehr gut. Also der wrapper sollte nur so groß sein, wie die "+" mit der gleichen Polsterung auf allen Seiten. Dann.wrapper
wächst in der Breite als.contents
tut. Ich dachte, das war super einfach zu tun, aber ich habe so viel Mühe mit ihm..wrapper
's Breite ist nicht 0;.wrapper
's Breite ist immer von.contents
's Breite ohne Inhalt. Nicht eine große Sache. Wie man.wrapper
wachsen und schrumpfen zusammen mit.contents
. Mit nur CSS. Das ist die Frage!http://jsfiddle.net/tVHYg/5/
Bekam es zu arbeiten, indem Sie den übergang in die Polsterung sowie die Breite.
JSFiddle: http://jsfiddle.net/tuybk748/1/
Habe ich nicht in der Lage gewesen, um es zu arbeiten, ohne eine Breite, aber die folgenden css gearbeitet
Ich bin mir nicht sicher, Sie werden in der Lage sein, um es arbeiten ohne Einstellung einer Breite drauf.