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

  1. .wrapper ist nicht nur so breit wie es sein muss.
  2. wenn .contents wächst, wenn es schon fast in voller Breite, es springt in die nächste Zeile
  3. Wenn die Maus aus der .wrapper, .contents verschwindet, wenn es sollte animieren, nach unten zu 0px

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.
InformationsquelleAutor android.nick | 2011-10-22
Schreibe einen Kommentar