jQuery animieren von unten nach oben

gibt es eine Möglichkeit Sie zu animieren ein element der Höhe(sagen wir mal div) von unten nach oben?
Zum Beispiel, sagen wir, ich habe ein div-element mit einer Höhe von 15px.

<div class='greyBox'>
<p>Example text</p>
</div>

Und das css ist:

.box{height:15px;width:60px;backgroundColor:#000;float:left;margin-left:20px;}
.box p{opacity:0;}

Dann verwende ich das jQuery:

 $('.greyBox').mouseenter(function(){
     $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200);
     });

Nun fügen Sie einfach weitere Boxen(rot,blau,...) mit dem gleichen css angewendet werden. Die animation funktioniert, aber wenn angewendet, über lassen Sie uns sagen, greyBox, es auch animiert, die rote, die ist neben ihm. Ich habe versucht, die änderung von float:left auf inline-block, aber kein Glück.

Nur eine Sache, die alle diese Kisten sind verpackt in einen absolut positionierten div mit width:100%, bottom:0;left:0;

P. s. Ich erstellte ein Turnschuh, so kann es selbst gesehen. Hier ist es

Vielen Dank,

Mirko

  • Erstellen Sie ein jsFiddle, und ich bin sicher, dass jemand helfen wird!
  • Ich denke, Sie haben Recht.Danke.
  • Ok hier das fiddle: link
InformationsquelleAutor fluxus | 2012-06-10
  1. 2
       $('.greyBox').mouseenter(function(){

   $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200);
       $(this).siblings().animate({marginTop: '35px'}, 700)

   });

    http://jsfiddle.net/BsPju/1/

    Können Sie Zähler-Gesetz der Höhe durch die Animation der marginTop von der Geschwister-Elemente.

    Sonst würden Sie brauchen, um Sie alle absolute mit bottom:0 Erklärung.

    • Danke, aber wird es funktionieren, wenn ich noch mehr Boxen?
    • Sicher werden. Ich benutzte die .siblings() - Selektor, so dass es wird markieren Sie alle anderen Boxen innerhalb der gleichen Eltern.
    • Danke, ich brauchte das wirklich. Ich wusste, es würde funktionieren mit absoluter Positionierung, aber es wäre nicht meine Bedürfnisse anzupassen. Das ist großartig!
    InformationsquelleAutor ahren
  2. 1

    Wenn Sie ändern float: left zu display: inline-block und fügen Sie vertical-align: bottom um die divs, es zeigt die Art und Weise Sie es haben wollen.

    Finden Sie unter: http://jsfiddle.net/AVXLq/1/

    • Danke, ich habe inline-block, aber die vertical-align-nie in den Sinn gekommen. Wenn ich könnte, markieren beide Antworten als korrekt, ich würde aber die Vorherige Antwort richtig, so war es nur eine Frage von Sekunden.
    InformationsquelleAutor jimr
Schreibe einen Kommentar